avalon js melaksanakan kemahiran meniru imej seret Weibo sorting_javascript

Berikut adalah penjelasan yang sangat terperinci tentang cara menyeret dan melaraskan susunan gambar Weibo yang pasti ada kekurangan dalam artikel Selamat datang untuk mengkritik dan membetulkan. Tidak banyak karut, mari kita lihat kandungan tertentu.

Klik di sini untuk masukMuat turun kod sumber

Apakah pengisihan imej seret dan lepas?

Sama seperti Weibo, pengguna dibenarkan melaraskan susunan beberapa gambar dengan menyeretnya selepas memuat naik.

Anda dapat melihat bahawa Weibo telah menetapkan saiz setiap gambar di sini Jika anda lebih tegas sedikit, anda perlu menjadi seperti artikel sebelum ini, dengan beberapa bekas div responsif dengan ketinggian dan lebar yang sama di luar. . , yang mengandungi imej responsif berskala berkadar.

Berikut adalah syarat-syaratnya.

1. Sudah tentu, imej mesti boleh diseret terlebih dahulu.

2. Alihkan imej keluar dari kedudukan asalnya, seretnya ke kedudukan sasaran dan sebelum menyelesaikan penyeretan tanpa melepaskan tetikus, anda perlu menetapkan pemegang tempat pada kedudukan sasaran untuk membolehkan pengguna melihat kesan selepas seretan selesai.

3. Selepas saiz ditukar, keperluan di atas masih boleh dilengkapkan.

4. Serasi dengan seberapa banyak pelayar yang mungkin. Malah, saya menulis artikel sebelum ini untuk membuka jalan kepada yang ini, jadi yang ini juga serasi dengan IE7.

Kesan akhir

krom

iaitu8

iaitu7

Pertama ialah menyeret.

Proksi yang digunakan di sini bermakna terdapat div tambahan dalam reka letak asal, dan objek yang diseret sebenarnya ialah div ini,

<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>

Ikat tetikus ke bawah pada setiap sel Apabila start_drag dicetuskan, letakkan img dalam sel ke dalam proksi9a1189f368bbe10179643504d09abef916b28748ea4df4d9c2150843fecfba68 Pada masa yang sama, dapatkan saiz imej dan tuliskannya. Kedudukan klik tetikus semasa, dan kedudukan klik digunakan sebagai titik tengah bagi segi empat tepat div proksi (gambar), proksi dipaparkan dan gambar yang diklik disembunyikan.

 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();
 }

Perhatikan beberapa perkara:

1.drag_sort.cell_size merekodkan saiz sel semasa Nisbah bidang di sini ialah 1:1 Kerana reka letaknya responsif, ia perlu direkodkan. Anda boleh melihat cara menggunakannya kemudian.

2. Sasaran acara perlu menentukan sama ada ia dicetuskan oleh teg img, kerana kedudukan klik mungkin kawasan kosong antara sel dan gambar.

3.ori_src digunakan untuk menyimpan gambar sel semasa, kerana sel pada kedudukan asal gambar akan dipadamkan apabila tetikus bergerak nanti.

4.drag_sort.target_index merekodkan indeks sel semasa dan kemudian akan membandingkan indeks ini dengan indeks sel yang mana ejen bergerak.

5.drag_flag menunjukkan sama ada mousemove dibenarkan.

6. Contohnya, target.setCapture();

Anda dapat melihat bahawa kelakuan lalai penyemak imbas akan dilaksanakan apabila menyeret.

7.event.preventDefault(); juga mesti ditambah, jika tidak, kelakuan lalai penyemak imbas akan berlaku. Contohnya, apabila Firefox menyeret imej, ia akan membuka tab baharu dan memaparkan imej.

Kemudian muncul mousemove, yang terikat pada tag ul. Peristiwa seperti mousemove dan mouseup biasanya terikat pada beberapa elemen induk biasa yang perlu dicetuskan, sekali gus mengurangkan bilangan objek yang terikat dengan acara tersebut.

Tertentu

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();
 }

Sedikit nota

1.drag_flag memastikan bahawa mousedown mesti dicetuskan sebelum mousemove boleh dicetuskan.

2.drag_sort.container ialah elemen punca keseluruhan reka letak, berikut ialah 32dd1458d427f4db45ae1fb40a9399c016b28748ea4df4d9c2150843fecfba68.

#wrap{
 position: relative;
 max-width: 620px;
 font-size: 0;
 }
 #drag_proxy{
 position: absolute;
 border:1px solid #009be3;
 z-index: 100;
 display: none;
 }

Apabila mengira kemudian, anda perlu menolak kiri dan atas unsur akar.

3. Bar skrol menegak penyemak imbas avalon(window).scrollTop() juga perlu dipertimbangkan semasa mengira.

4. Saiz setiap sel sentiasa sama, jadi kedudukan kursor bergerak terus dibahagikan dengan bilangan baris dan lajur dan dibundarkan untuk mendapatkan indeks sel sasaran.

5.move_to!=drag_sort.target_index Sel yang kursor semasa dialihkan bukanlah sel tempat gambar asalnya berada Padamkan sel di lokasi asal gambar dan masukkan sel pemegang tempat dalam sel sasaran. Pada masa ini, imej yang diseret belum lagi diletakkan dalam sel sasaran, dan indeks sel awal akhirnya dikemas kini

Akhir sekali, naik tetikus

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这种无效操作。因为是在document上绑定mouseup,就要排除类似于随便在空白处点击这种情况。这时不能对单元格删除，插入。

然后是把各变量设为初始值。

图片效果：

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){//如果点下了图片
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);//删除当前图片的li
var target_index=3*y_index+x_index;//目标图片的位置（3*3）
if(post_img.post_img_list.indexOf('about:blank')!=target_index)
//如果图片数组中没有src=about:blank这个占位置的li
post_img.post_img_list.splice(target_index, 0, 'about:blank');
//添加src=about:blank
index=target_index;
//会触发很多次move,所以触发一次就改动一次
}
};
});
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;
};

以上代码实现了avalon js仿微博拖动图片排序的功能，本文写的不好还请见谅。