阿瓦隆js实现类似微博客将图片排序
以下是随机拖动的仿微博图片。调整的顺序非常详细。这篇文章一定有些不足之处。欢迎批评指正，不要说太多的浪费，看看具体的内容。点击这里输入源代码下载
什么是拖动图片排序
像这样，微博上传后，用户可以通过拖动图片来调整多张图片的顺序。
可以看出，每一张照片都是按微博大小固定的。如果它更严格一点，它需要一个类似div的容器。
下面是下一个请求。
1。当然，首先，图片是可以拖动的。
2、将图片移出原来的位置，拖动到目标位置，而不松开鼠标。拖动前，我们需要在目标位置设置占位符，以便用户拖动后可以预览效果。
三.在尺寸变化后，上述要求仍然可以完成。
4。要尽可能的多浏览器兼容的。事实上，写一篇文章是一个铺这个，所以它也兼容IE7。
最终效果
铬
IE8
IE7
第一个是阻力。
这里使用的代理，即在原有的布局比一个div，对象的实际阻力是这部具体，
每个细胞结合MouseDown，触发细胞start_drag，IMG进入剂里面，把图片的大小，记下当前鼠标点击的位置，和矩形的位置单击代理div（图片）中心，显示剂，点击图片隐藏。
start_drag：功能（E，我，EL）{
VaR（'wrap_img img =美元+我）。FirstChild，target_img_width = img.clientwidth，target_img_height = img.clientheight；
drag_sort。cell_size = $（'wrap_img0ClientWidth）；
VaR XX = e.clientx-target_img_width / 2，YY = e.clienty-target_img_height / 2，偏移=阿瓦隆（$（drag_sort。容器））。偏移（），目标= e.target.parentnode.parentnode.parentnode；
$（'drag_proxy）。风格。= YY +阿瓦隆（窗口），ScrollTop（）-顶+ 'px的偏移；
$（'drag_proxy）。风格。左= XX左+ 'px的偏移；
$（'drag_proxy）。风格。宽度= target_img_width + 'px；
$（'drag_proxy）。风格。高度= target_img_height + 'px；
如果（targettarget nodename = =。李）{
ori_src = EL；
/ / $（'drag_proxy）.innerHTML = target.queryselector（'p'）。InnerHTML；
$（'drag_proxy）.innerHTML = $（'wrap_img +我）。InnerHTML；
$（'drag_proxy）。风格显示=阻止；
drag_sort target_index =我；
drag_flag =真；
}
如果（议）
target.setcapture（）；
Avalon.bind（文档，'mouseup功能（））{
向上（目标）；
}）；
e.stoppropagation（）；
E.preventDefault（）；
}
注意几点：
1.drag_sort.cell_size记录当前单元格的大小，在宽度和高度的比为1:1，因为布局是一个响应，因此它需要被记录。你可以看到它是如何用在后面。
2个目标。事件需要判断img标签被触发，因为它是可能的，点击的位置是细胞与画面之间的空白区域。
3.ori_src是用来保存当前单元格的图片，因为原来的位置的细胞将被删除的MouseMove当背后。
4.drag_sort.target_index记录当前单元格的指数，然后比较指数。细胞通过索引和代理移动到细胞。
5.drag_flag表示可MouseMove。
6。IE浏览器，它必须target.setcapture（）；否则
当浏览器被拖动时，您可以看到浏览器的默认行为。
7.event.preventdefault（）也必须增加，否则也会出现浏览器的默认行为。例如，当Firefox拖动图片时，它会打开新的标签页并显示图片。
然后MouseMove，这必将对UL标签。像MouseMove、MouseUp事件通常绑定到一些共同的父元素，需要触发因素，从而降低了事件绑定的对象。
混凝土
drag_move：功能（e）{
如果（drag_flag）{
var = e.clientx XX，YY = e.clienty，偏移=阿瓦隆（$（drag_sort。容器））偏移（）；
var x = xx-offset.left，Y =阿瓦隆（窗口），ScrollTop（）+ yy-offset.top；
无功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）。风格。最高y-drag_sort。cell_size / 2 + 'px；
$（'drag_proxy）。风格。左= x-drag_sort。cell_size / 2 + 'px；
如果（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保证触发鼠标在鼠标移动。可以触发
2.drag_sort.container是整个布局的根元素，它在这里。
#包{
职位：相对；
马克斯：620px宽度；
字体大小：0；
}
# drag_proxy {
位置：绝对；
边境：1px solid # 009be3；
Z-index: 100;
显示：无；
}
当计算后者时，应减少根元素的左边和顶部。
The vertical scrollbar of the Avalon (window).ScrollTop () browser should also be considered at the time of 3..
4。每个单元格的大小总是一样的，所以直接光标的位置除以行数、列数、取整数，得到目标单元格的索引。
5.move_to！= drag_sort.target_index细胞当前光标到细胞不是原始图片，图片的原始位置删除单元格，插入占细胞的靶细胞，然后拖动图片不进入靶细胞，指数。单元格在开始时是最后更新的。
最后，松开鼠标
函数向上（目标）{
如果（议）
target.releasecapture（）；
无功target_index = drag_sort.target_index；
如果（ori_srctarget_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）。风格显示=不关；
Avalon.unbind（文档，'mouseup）；
}
判断ori_srctarget_index的目的！= 1是排除无效操作MouseUp非绑定对象。因为它是绑定MouseUp文件，你必须排除的情况一样，在点击空白。在这一点上，你不能删除单元格和插入。
然后将变量设置为初始值。
画面效果：
HTML代码：
JS代码：
无功drag_holder = null，指数为1，ori_src = null，drag_flag = false； / /阻剂，原始图像，原始图像是SRC
无功post_img = avalon.define（'post_img功能（VM）{）
Vm.post_img_list={}; / / save all pictures of SRC
VM。onmousedown =功能（E，我，EL）{
$（'drag_proxy）。风格显示=阻止；
VaR目标= e.target.parentnode；
XX = e.clientx VaR；
VaR YY = e.clienty；
$（'drag_proxy）。风格。= YY + 'px；
$（'drag_proxy）。风格。左= XX + 'px；
如果（targettarget nodename = =。李）{
ori_src = EL；
指数= target.getattribute（'id'）。Substring（13）；
$（'drag_proxy）.innerHTML = target.innerhtml；
post_img.post_img_list.splice（我，1，空白：）；
}
drag_flag =真；
}；
VM。移动鼠标=功能（e）{
如果（drag_flag）{ / /如果下图片
XX = e.clientx VaR；
VaR YY = e.clienty；
$（'drag_proxy）。风格。= YY + 'px；
$（'drag_proxy）。风格。左= XX + 'px；
var x = XX阿瓦隆（$（'post_img '））。偏移（左）；
var y = YY阿瓦隆（$（'post_img '））。偏移（顶部）；
不考虑滚动条示例
无功x_index = math.floor（X / 100）； / /图像尺寸100×100
无功y_index = math.floor（Y / 100）；
post_img.post_img_list.splice（指数1）； / /删除当前李图片
无功target_index = 3 * y_index + x_index； / /目标图像的位置（3×3）
如果（post_img.post_img_list.indexof（空白：）！= target_index）
如果该数组中的图片不包含关于李的位置
post_img.post_img_list.splice（target_index，0，空白：）；
添加关于：空白
指数= target_index；
将触发大量移动，所以触发器一次更改。
}
}；
}）；
文件。onmouseup =功能（e）{
drag_holder = null；
如果（ori_src）{
post_img.post_img_list.splice（指数1）；
删除…
post_img.post_img_list.splice（指数0，ori_src）；
添加原始图片
}
$（'drag_proxy）。风格显示=不关；
$（'drag_proxy）.innerHTML =；
drag_flag = false；
}；
上面的代码实现Avalon JS像微博拖动图片排序功能，本文不好，请原谅我。