avalon js は Weibo のドラッグ画像の並べ替え_javascript スキルを模倣して実装します

以下は、Weibo の写真をドラッグして順序を調整する方法についての非常に詳細な説明です。記事には間違いなく欠陥があります。批判と修正を歓迎します。あまりナンセンスではないので、具体的な内容を見てみましょう。

ここをクリックして入力してくださいソースコードのダウンロード

ドラッグアンドドロップによる画像の並べ替えとは何ですか?

Weibo と同様に、ユーザーはアップロード後に複数の写真をドラッグして順序を調整できます。

ここで Weibo が各写真のサイズを固定していることがわかります。もう少し厳密な場合は、前の記事 のように、外側に同じ高さと幅の複数のレスポンシブ div コンテナーを配置する必要があります。 . には、比例的に拡大縮小されたレスポンシブ画像が含まれます。

要件は次のとおりです。

1. もちろん、最初に画像がドラッグ可能である必要があります。

2. 画像を元の位置から移動し、ターゲット位置にドラッグします。マウスを放さずにドラッグを完​​了する前に、ユーザーが後で効果をプレビューできるように、ターゲット位置にプレースホルダーを設定する必要があります。ドラッグが完了しました。

3. レスポンシブ。サイズを変更した後でも、上記の要件を完了できます。

4. できるだけ多くのブラウザと互換性があります。実際、私はこの記事への道を開くために 前の 記事を書いたので、この記事も IE7 と互換性があります。

最終効果

クロム

ie8

ie7

最初はドラッグです。

ここで使用されるプロキシは、元のレイアウトに追加の div が存在することを意味し、実際にドラッグされたオブジェクトはこの 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>

start_drag がトリガーされると、mousedown を各セルにバインドし、セル内の画像をプロキシ9a1189f368bbe10179643504d09abef916b28748ea4df4d9c2150843fecfba68に配置します。同時に画像のサイズを取得します。現在のマウスクリック位置を書き留めます。クリック位置はプロキシ div 四角形 (画像) の中心点として使用され、プロキシが表示され、クリックされた画像は非表示になります。

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

いくつかの点に注意してください:

1.drag_sort.cell_size は、現在のセルのサイズを記録します。ここでのアスペクト比は 1:1 であるため、記録する必要があります。これの使用方法は後ほど説明します。

2. クリック位置がセルと画像の間の空白領域である可能性があるため、イベントのターゲットは img タグによってトリガーされるかどうかを判断する必要があります。

3.ori_src は、現在のセルの画像を保存するために使用されます。これは、後でマウスを移動すると、画像の元の位置にあるセルが削除されるためです。

4.drag_sort.target_index は現在のセルのインデックスを記録し、後でこのインデックスをエージェントの移動先のセルのインデックスと比較します。

5.drag_flag は、マウス移動が許可されているかどうかを示します。

6. ie の場合は target.setCapture() を使用する必要があります。それ以外の場合は

ドラッグ時にブラウザのデフォルトの動作が実行されることがわかります。

7.event.preventDefault(); も追加する必要があります。追加しない場合、たとえば、Firefox が画像をドラッグすると、新しいタブが開き、画像が表示されます。

次に、ul タグにバインドされている Mousemove が来ます。 Mousemove や Mouseup などのイベントは通常、トリガーする必要があるいくつかの共通の親要素にバインドされるため、イベントがバインドされるオブジェクトの数が減ります。

特定

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

いくつかのメモ

1.drag_flag は、mousemove をトリガーする前に、mousedown をトリガーする必要があることを保証します。

2.drag_sort.container はレイアウト全体のルート要素です。ここでは 32dd1458d427f4db45ae1fb40a9399c016b28748ea4df4d9c2150843fecfba68 です。

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

後で計算するときは、ルート要素の左と上を引く必要があります。

3. 計算時には、avalon(window).scrollTop() ブラウザの垂直スクロール バーも考慮する必要があります。

4. 各セルのサイズは常に同じであるため、カーソルが直接移動する位置を行数と列数で除算し、四捨五入してターゲット セルのインデックスを取得します。

5.move_to!=drag_sort.target_index 現在のカーソルの移動先のセルは、元の図が存在するセルではありません。図の元の位置にあるセルを削除し、移動先のセルにプレースホルダー セルを挿入します。この時点では、ドラッグされた画像はまだターゲットセルに配置されておらず、最初のセルのインデックスが最終的に更新されます。

最後にマウスアップ

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仿微博拖动图片排序的功能，本文写的不好还请见谅。