华夏棋牌 > web前端 > js教程 > 注释

avalon js完成仿微博拖动图片排序_javascript手艺

原创 2016-05-16 15:45:11 0 155
赞助会员专享特权
下文针对仿微博图片随便拖动,调剂图片的序次,解说的很详细,文章一定尚有完善的地方,迎接提出批判纠正。空话不多说了,看详细内容吧。

点击此处进入

华夏棋牌甚么是拖动图片排序?

华夏棋牌就像微博这类,上传后允许用户经由历程拖动图片,调剂几张图片的序次。

华夏棋牌可以看到微博在这里把每张图片结实了尺寸,稍微严谨点的话,就须要像文章那样,外面是照顾式的等高等宽的若干div容器,外面则是等比例缩放的照顾式图片。

下面说下请求。

华夏棋牌1.虽然首先图片要可以拖动。

华夏棋牌2.图片移出其原来的职位,拖动到目的职位而且未松开鼠标完成拖动前,须要在目的职位设置占位符,让用户预览拖动完成后的效果。

3.照顾式。尺寸改变后,依然可以完成下面请求。

华夏棋牌4.尽能够兼容更多的浏览器。现实上,写文章就是为这篇做铺垫的,以是这里也是兼容到ie7.

事实效果

chrome

ie8

ie7

首先是拖动。

这里用的署理,即在原来的结构中多了个div,现实拖动的工具就是这个div.详细的,

对每个单元格绑定mousedown,触发start_drag时,把单元格里的img放到署理

外面,同时取得图片的年夜小,记下以后鼠标点击的职位,并以点击职位为署理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.事宜的target须要断定是不是img标签触发的,由于有能够点击职位是单元格与图片间的空缺区域。

华夏棋牌3.ori_src用来生涯以后单元格的图片,由于前面mousemove的时间会删除图片原来职位的单元格。

华夏棋牌4.drag_sort.target_index纪录以后单元格的index,前面会较量这个index和署理移动到的单元格的index.

5.drag_flag体现能否可以mousemove了。

6.关于ie,必须target.setCapture();,否则

可以看到拖动的时间会推行浏览器的默许行动。

7.event.preventDefault();也必须加上,否则也会泛起浏览器的默许行动,好比firefox拖动图片时,会掀开新标签页,显示图片。

然后是mousemove,这里绑定在ul标签上。像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保证必须先触发mousedown后,才可以触发mousemove.

2.drag_sort.container是一切结构的根元素,这里是

.

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

前面盘算的时间要把根元素的left,top减掉落落。

华夏棋牌3.盘算时avalon(window).scrollTop()浏览器的竖直迁徙转变条也要推敲。

4.每个单元格的尺寸一直是一样的,以是直接光标移动到的职位除以行数,列数,取整,取得目的单元格的index.

华夏棋牌5.move_to!=drag_sort.target_index以后光标移到的单元格不是图片原来所在的单元格,删除图片原来职位的单元格,在目的单元格拔出占位的单元格,这时间间拖动的图片还没放进目的单元格,最后更新初始单元格的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这类有用操作。由于是在document上绑定mouseup,就要扫除类似于随便在空缺处点击这类情形。这时间间不克不及对单元格删除,拔出。

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

图片效果:

HTML代码:

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

php中文网最新课程二维码
  • 相关标签:avalon.js教程 js拖动排序 js完成拖动
  • 本文原创宣布php中文网 ,转载请注明出处,谢谢您的尊重!
  • 相关文章


  • 原生javascript完因素享到同伙圈功效 支持ios和android_javascript手艺
  • jQuery链式挪用与show知识浅析_jquery
  • JS完成登录页面记着密码和enter键登录措施推荐_javascript手艺
  • BootstrapTable与KnockoutJS相联络完成增删改查功效【一】_javascript手艺
  • avalon js完成仿微博拖动图片排序_javascript手艺
  • 网友议论

    文明上彀理性语言,请遵守 新闻议论服务协定

    我要议论

    独孤九贱(5)_ThinkPHP5视频教程

    华夏棋牌ThinkPHP是国际最盛行的中文PHP开发框架,也是您Web项目的最好选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架知识泉源,将...

    • 2017-05-16 12:03:57
    • 点击数(175972)

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是天下上最好的编程语言。真的是这样吗?这个梗现实是从哪来的?学会本课程,你就会明确了。 华夏棋牌-万豪棋牌电玩城-微信娱乐棋牌出品的PHP入门系统教授修养视频,完全从初学者的角度出发,绝不玩虚的,一切以适用、有用...

    • 2017-03-20 22:47:17
    • 点击数(171777)

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特点:php中文网原创滑稽段子系列课程,以恶弄,段子为主题气焰气焰的php视频教程!轻松的教授修养气焰气焰,杂乱的教授修养形式,让同砚们在不知不觉中,学会了HTML知识。 ...

    • 2017-03-13 10:15:11
    • 点击数(139390)

    ThinkPHP5实战之[教授修养治理系统]

    本套教程,以一个真实的黉舍教授修养治理系统为案例,手把手教会您怎样在一张白纸上,从零泉源,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • 2017-07-24 16:48:56
    • 点击数(132207)

    PHP入门视频教程之一周学会PHP

    华夏棋牌一切盘算机语言的学习都要从根原泉源,《PHP入门视频教程之一周学会PHP》不只是PHP的基础部门更主要的是PHP语言的焦点手艺,是学习PHP必须控制的内容,任何PHP项目的完成都离不开这部门的内容,通...

    • 2016-11-16 14:54:14
    • 点击数(131858)

    作者信息

    php中文网

    认证0级讲师

    比来文章

    相关视频教程

  • javascript低级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 相关视频章节