javascript实现图片拖动改变顺序例子（带效果图）
在web页面中，需要改变多个元素的位置，可以通过元素拖动来实现。HTML5中加入了一个全局属性draggable，通过设置true/false来控制元素是否可拖动。
下面以图片拖动为例，用jQuery来实现：页面上有多个图片，把一个图片拖动到其他两个图片中间，就可以将这个图片的位置插入到两图之间。
代码如下:
<!DOCTYPE html>
<html>
<head>
<style>
.img-div img {
width:200px;
height:200px;
float: left;
}
.img-div {
float: left;
}
.drop-left,.drop-right {
width: 50px;
height: 200px;
float: left;
}
</style>
<script src="http://camnpr.com/upload/2014/5/201405141158170240.jpg" draggable="true">
<div class="drop-right"></div>
</div>
<div class="img-div">
<div class="drop-left"></div>
<img src="http://camnpr.com/upload/2014/5/201405141158176587.jpg" draggable="true">
<div class="drop-right"></div>
</div>
<div class="img-div">
<div class="drop-left"></div>
<img src="http://camnpr.com/upload/2014/5/201405141158187381.jpg" draggable="true">
<div class="drop-right"></div>
</div>
<div class="img-div">
<div class="drop-left"></div>
<img src="http://camnpr.com/upload/2014/5/201405141158191545.jpg" draggable="true">
<div class="drop-right"></div>
</div>
</body>
</html>
dragstart是开始拖动元素的事件，dragover是拖动到元素上方的事件，drop是拖动结束松开鼠标的事件。
draggable="true"表示img元素是可以拖动的，不过实际上img默认就是可拖动的，所以这个属性也可以去掉，如果要拖动div元素那么就需要设置draggable="true"。
class为drop-left和drop-right的div元素放在图片的左右侧，用于接收其他图片拖动到这个位置。 
相关文章
- [例子]jQuery EasyUI 数字格式化处理(2014-5-13 14:26:38)
- 分享jQuery EasyUI 日期控件如何控制日期选择区间(2014-5-13 14:22:53)
- 用jquery插件来实现定时查询待处理任务数量(2014-5-9 14:41:34)
- javascript实现checkbox全选和反选的例子(2014-5-9 14:31:36)
- 分享jquery实现等待效果例子(2014-5-9 14:13:42)
- javascript中关于(function( window, document, undefined ) {})(window, document)写法的好处和作用(2014-4-25 15:55:24)
- 分享一个非常不错的JS分页效果代码(2014-4-25 13:23:53)
- jquery ajax应用中iframe自适应高度问题解决方法(2014-4-15 16:31:11)
- jQuery中阻止冒泡事件的方法介绍 stopPropagation preventDefault(2014-4-15 16:29:26)
- jQuery操作表格（table）的常用方法、技巧汇总(2014-4-15 16:2:8)
