avalon js는 Weibo 드래그 이미지 sorting_javascript 기술을 모방하는 기능을 구현합니다.

다음은 웨이보 모방 사진을 드래그하고 순서를 조정하는 방법에 대한 매우 자세한 설명입니다. 기사에 확실히 부족한 부분이 있으니 비판과 수정을 환영합니다. 별로 헛소리는 아니고, 구체적인 내용을 살펴보겠습니다.

입력하려면 여기를 클릭하세요소스 코드 다운로드

드래그 앤 드롭 이미지 정렬이란 무엇인가요?

웨이보와 마찬가지로 여러 장의 사진을 업로드한 후 드래그하여 순서를 조정할 수 있습니다.

여기에서 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>

각 셀에 mousedown을 바인딩합니다. start_drag가 트리거되면 셀의 img를 프록시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. 즉, 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仿微博拖动图片排序的功能，本文写的不好还请见谅。