转载请注明: TheViper http://www.cnblogs.com/TheViper 什么是拖动图片排序?就像微博这种,上传后允许用户通过拖动图片,调整几张图片的顺序。可以看到微博在这里把每张图片固定了尺寸,稍微严谨点的话,就需要像上一篇文章那样,外面是响 ...
转载请注明: TheViper http://www.cnblogs.com/TheViper
什么是拖动图片排序?
就像微博这种,上传后允许用户通过拖动图片,调整几张图片的顺序。
可以看到微博在这里把每张图片固定了尺寸,稍微严谨点的话,就需要像上一篇文章那样,外面是响应式的等高等宽的若干div容器,里面则是等比例缩放的响应式图片。
下面说下要求。
1.当然首先图片要可以拖动。
2.图片移出其原本的位置,拖动到目标位置并且未松开鼠标完成拖动前,需要在目标位置设置占位符,让用户预览拖动完成后的效果。
3.响应式。尺寸改变后,仍然可以完成上面要求。
4.尽可能兼容更多的浏览器。实际上,写上一篇文章就是为这篇做铺垫的,所以这里也是兼容到ie7.
最终效果
chrome
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='/images/loading.gif' data-original="el.src"><i></i></p> </div> </li> </ul> <div id='drag_proxy'></div> </div>
原标题:avalon js实现拖动图片排序
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。