avalon js實(shí)現(xiàn)仿微博拖動圖片排序
下文針對仿微博圖片隨意拖動，調(diào)整圖片的順序，講解的很詳細(xì)，文章肯定還有欠缺的地方，歡迎提出批評改正。廢話不多說了，看具體內(nèi)容吧。
點(diǎn)擊此處進(jìn)入源碼下載
什么是拖動圖片排序?
就像微博這種，上傳后允許用戶通過拖動圖片，調(diào)整幾張圖片的順序。
可以看到微博在這里把每張圖片固定了尺寸，稍微嚴(yán)謹(jǐn)點(diǎn)的話，就需要像上一篇文章那樣，外面是響應(yīng)式的等高等寬的若干div容器，里面則是等比例縮放的響應(yīng)式圖片。
下面說下要求。
1.當(dāng)然首先圖片要可以拖動。
2.圖片移出其原本的位置，拖動到目標(biāo)位置并且未松開鼠標(biāo)完成拖動前，需要在目標(biāo)位置設(shè)置占位符，讓用戶預(yù)覽拖動完成后的效果。
3.響應(yīng)式。尺寸改變后，仍然可以完成上面要求。
4.盡可能兼容更多的瀏覽器。實(shí)際上，寫上一篇文章就是為這篇做鋪墊的，所以這里也是兼容到ie7.
最終效果
chrome
ie8
ie7
首先是拖動。
這里用的代理，即在原本的布局中多了個div,實(shí)際拖動的對象就是這個div.具體的，
<div id='wrap' ms-controller='drag_sort' class='ms-controller'>
<ul ms-mousemove='drag_move($event)'>
<li ms-repeat='photo_list'>
<div ms-mousedown='start_drag($event,$index,el)'>
<div class="dummy"></div>
<p ms-attr-id='wrap_img{{$index}}'><img ms-attr-src="el.src"><i></i></p>
</div>
</li>
</ul>
<div id='drag_proxy'></div>
</div>
對每個單元格綁定mousedown,觸發(fā)start_drag時，把單元格里的img放到代理<div id='drag_proxy'></div>里面，同時獲取圖片的大小，記下當(dāng)前鼠標(biāo)點(diǎn)擊的位置，并以點(diǎn)擊位置為代理div矩形（圖片）的中心點(diǎn)，顯示代理，隱藏點(diǎn)擊的圖片。
start_drag:function(e,i,el){
var img=$('wrap_img'+i).firstChild,target_img_width=img.clientWidth,target_img_height=img.clientHeight;
drag_sort.cell_size=$('wrap_img0').clientWidth;
var xx=e.clientX-target_img_width/2,yy=e.clientY-target_img_height/2,offset=avalon($(drag_sort.container)).offset(),target=e.target.parentNode.parentNode.parentNode;
$('drag_proxy').style.top=yy+avalon(window).scrollTop()-offset.top+'px';
$('drag_proxy').style.left=xx-offset.left+'px';
$('drag_proxy').style.width=target_img_width+'px';
$('drag_proxy').style.height=target_img_height+'px';
if(target&&target.nodeName=='LI'){
ori_src=el;
// $('drag_proxy').innerHTML=target.querySelector('p').innerHTML;
$('drag_proxy').innerHTML=$('wrap_img'+i).innerHTML;
$('drag_proxy').style.display='block';
drag_sort.target_index=i;
drag_flag=true;
}
if(isIE)
target.setCapture();
avalon.bind(document,'mouseup',function(){
up(target);
});
e.stopPropagation();
e.preventDefault();
}
注意幾點(diǎn)：
1.drag_sort.cell_size記錄當(dāng)前單元格的尺寸，這里寬高比是1:1,因?yàn)椴季质琼憫?yīng)式，所以需要記錄。后面可以看到這個怎么用。
2.事件的target需要判斷是不是img標(biāo)簽觸發(fā)的，因?yàn)橛锌赡茳c(diǎn)擊位置是單元格與圖片間的空白區(qū)域。
3.ori_src用來保存當(dāng)前單元格的圖片，因?yàn)楹竺鎚ousemove的時候會刪除圖片原本位置的單元格。
4.drag_sort.target_index記錄當(dāng)前單元格的index,后面會比較這個index和代理移動到的單元格的index.
5.drag_flag表示是否可以mousemove了。
6.對于ie,必須target.setCapture();，否則
可以看到拖動的時候會執(zhí)行瀏覽器的默認(rèn)行為。
7.event.preventDefault();也必須加上，否則也會出現(xiàn)瀏覽器的默認(rèn)行為，比如firefox拖動圖片時，會打開新標(biāo)簽頁，顯示圖片。
然后是mousemove,這里綁定在ul標(biāo)簽上。像mousemove,mouseup事件通常都綁定在若干需要觸發(fā)元素的公共父元素上，這樣就減少了事件綁定的對象了。
具體的
drag_move:function(e){
if(drag_flag){
var xx=e.clientX,yy=e.clientY,offset=avalon($(drag_sort.container)).offset();
var x=xx-offset.left,y=avalon(window).scrollTop()+yy-offset.top;
var x_index=Math.floor(x/drag_sort.cell_size),y_index=Math.floor(y/drag_sort.cell_size),move_to=3*y_index+x_index;
$('drag_proxy').style.top=y-drag_sort.cell_size/2+'px';
$('drag_proxy').style.left=x-drag_sort.cell_size/2+'px';
if(move_to!=drag_sort.target_index){
drag_sort.photo_list.removeAt(drag_sort.target_index);
drag_sort.photo_list.splice(move_to,0,{src:'1.jpg'});
drag_sort.target_index=move_to;
}
}
e.stopPropagation();
}
幾點(diǎn)說明
1.drag_flag保證必須先觸發(fā)mousedown后，才可以觸發(fā)mousemove.
2.drag_sort.container是整個布局的根元素，這里是<div id='wrap'></div>.
#wrap{
position: relative;
max-width: 620px;
font-size: 0;
}
#drag_proxy{
position: absolute;
border:1px solid #009be3;
z-index: 100;
display: none;
}
后面計(jì)算的時候要把根元素的left,top減掉。
3.計(jì)算時avalon(window).scrollTop()瀏覽器的豎直滾動條也要考慮。
4.每個單元格的尺寸始終是一樣的，所以直接光標(biāo)移動到的位置除以行數(shù)，列數(shù)，取整，得到目標(biāo)單元格的index.
5.move_to!=drag_sort.target_index當(dāng)前光標(biāo)移到的單元格不是圖片原本所在的單元格，刪除圖片原本位置的單元格，在目標(biāo)單元格插入占位的單元格，這時拖動的圖片還沒放進(jìn)目標(biāo)單元格，最后更新初始單元格的index.
最后是mouseup
function up(target){
if(isIE)
target.releaseCapture();
var target_index=drag_sort.target_index;
if(ori_src&&target_index!=-1){
drag_sort.photo_list.splice(target_index,1);
drag_sort.photo_list.splice(target_index,0,ori_src);
}
drag_holder=null;
drag_flag=false;
drag_sort.target_index=-1;
$('drag_proxy').style.display='none';
avalon.unbind(document,'mouseup');
}
判斷ori_src&&target_index!=-1目的在于排除在非綁定對象上mouseup這種無效操作。因?yàn)槭窃赿ocument上綁定mouseup,就要排除類似于隨便在空白處點(diǎn)擊這種情況。這時不能對單元格刪除，插入。
然后是把各變量設(shè)為初始值。
圖片效果：
HTML代碼:
<div id='post_img' ms-controller='post_img'>
<ul id='post_img_inner' ms-mousemove='onmousemove'>
<li ms-repeat-el="post_img_list" class='inline-block' ms-mousedown='onmousedown($event,$index,el)' ms-attr-id='post_img_item{{$index}}'>
<img ms-src='el' class='uploaded_img'></li>
</ul>
</div>
JS代碼:
var drag_holder=null,index=-1,ori_src=null,drag_flag=false;//拖動的代理，原圖片，原圖片的src
var post_img = avalon.define('post_img', function(vm) {
vm.post_img_list=[];//保存所有圖片的src
vm.onmousedown=function(e,i,el){
$('drag_proxy').style.display='block';
var target=e.target.parentNode;
var xx = e.clientX;
var yy = e.clientY;
$('drag_proxy').style.top=yy+'px';
$('drag_proxy').style.left=xx+'px';
if(target&&target.nodeName=='LI'){
ori_src=el;
index=target.getAttribute('id').substring(13);
$('drag_proxy').innerHTML=target.innerHTML;
post_img.post_img_list.splice(i, 1, 'about:blank');
}
drag_flag=true;
};
vm.onmousemove=function(e){
if(drag_flag){//如果點(diǎn)下了圖片
var xx = e.clientX;
var yy = e.clientY;
$('drag_proxy').style.top=yy+'px';
$('drag_proxy').style.left=xx+'px';
var x=xx-avalon($('post_img')).offset().left;
var y=yy-avalon($('post_img')).offset().top;
//例子沒有考慮滾動條的情況
var x_index=Math.floor(x/100);//圖片尺寸100*100
var y_index=Math.floor(y/100);
post_img.post_img_list.splice(index, 1);//刪除當(dāng)前圖片的li
var target_index=3*y_index+x_index;//目標(biāo)圖片的位置（3*3）
if(post_img.post_img_list.indexOf('about:blank')!=target_index)
//如果圖片數(shù)組中沒有src=about:blank這個占位置的li
post_img.post_img_list.splice(target_index, 0, 'about:blank');
//添加src=about:blank
index=target_index;
//會觸發(fā)很多次move,所以觸發(fā)一次就改動一次
}
};
});
document.onmouseup=function(e){
drag_holder=null;
if(ori_src){
post_img.post_img_list.splice(index, 1);
//刪除src=about:blank
post_img.post_img_list.splice(index, 0,ori_src);
//添加原圖片
}
$('drag_proxy').style.display='none';
$('drag_proxy').innerHTML='';
drag_flag=false;
};
以上代碼實(shí)現(xiàn)了avalon js仿微博拖動圖片排序的功能，本文寫的不好還請見諒。
相關(guān)文章
本篇文章主要介紹了淺談ES6 模板字符串的具體使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
如何學(xué)JavaScript？前輩的經(jīng)驗(yàn)之談
這篇文章主要介紹了如何學(xué)JavaScript？前輩的經(jīng)驗(yàn)之談，也就是怎么學(xué)前端的問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
本文給大家分享的是個人對于12306的新的驗(yàn)證碼系統(tǒng)的破解思路，僅僅是思路，還沒進(jìn)行實(shí)地驗(yàn)證，推薦給大家，拋磚引玉吧。2015-03-03
這篇文章主要介紹了如何使用js判斷瀏覽器是否支持html5,需要的朋友可以參考下2014-08-08
白色簡潔樣式計(jì)算器JS代碼是一款精美簡潔計(jì)算器JS代碼插件網(wǎng)頁特效，軟件應(yīng)用，后臺應(yīng)用JS計(jì)算器插件代碼免費(fèi)下載。2015-05-05
靈活使用數(shù)組制作圖片切換js實(shí)現(xiàn)
這篇文章主要介紹了靈活使用數(shù)組制作圖片切換效果，js實(shí)現(xiàn)圖片切換特效，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
js removeChild 障眼法 可能出現(xiàn)的錯誤
js removeChild 障眼法之可能出現(xiàn)的錯誤，大家看下代碼就知道了。2009-10-10
本文是腳本之家小編日常整理的關(guān)于javascript知識點(diǎn)，包括javascript擁有的特點(diǎn)，組成部分，數(shù)據(jù)類型等方面，對javascript知識點(diǎn)相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-12-12
這篇文章主要為大家介紹了JavaScript Window.open 彈窗使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
JavaScript模擬實(shí)現(xiàn)網(wǎng)易云輪播效果
這篇文章主要介紹了如何利用JavaScript模仿網(wǎng)易云輪播效果的實(shí)現(xiàn)，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)有一定幫助，需要的可以參考一下2022-04-04