avalonjs实现微博客的图片拖动效果

uff1a效应

HTML：

JS：

无功drag_holder = null，指数为1，ori_src = null，drag_flag = false； / /阻剂，原始图像，原始图像是SRC
无功post_img = avalon.define（'post_img功能（VM）{）
VM。post_img_list = {}； / /保存所有图片的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；
}；

以上是本文的全部内容，希望大家能喜欢。