之前,想在浏览器中实现拖放似乎很困难,现在有了HTML5就简单了。下面实现一个例子:简单的拖拽排序。
拖放测试页面(DragDrop.html)
页面使用bootstrap
展示几张图片(缩略图)注:省略号部分表示你可以自己在div.row下复制更多个div.thumbnail
1 |
|
拖放测试脚本(DragDrop.js)
注:脚本依赖的jquery已经在页面里引入。
1 | $(function(){ |
总结
上例的拖放效果在最新的Chrome
、IE
、QQ浏览器
下测试了都很正常,但在FireFox
下拖放图片会激活一个新的页签(有人说使用e.preventDefault()
可以解决,但我试了没有效果)。