[关闭]
@TedZhou 2015-08-22T02:17:19.000000Z 字数 2092 阅读 259

简单实现Web页面元素拖放功能(Web Drag & Drop)

技术 html javascript


之前,想在浏览器中实现拖放似乎很困难,现在有了HTML5就简单了。下面实现一个例子:简单的拖拽排序。

拖放测试页面(DragDrop.html)

页面使用bootstrap展示几张图片(缩略图)
注:省略号部分表示你可以自己在div.row下复制更多个div.thumbnail

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Drag & Drop sample</title>
  8. <link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.1.1/css/bootstrap.min.css">
  9. </head>
  10. <body>
  11. <div class="container">
  12. <div class="row">
  13. <div class="thumbnail col-sm-6 col-md-4">
  14. <img class="img-responsive" src="img1.png">
  15. <div class="caption text-center"><h5>Image1</h5></div>
  16. </div>
  17. <div class="thumbnail col-sm-6 col-md-4">
  18. <img class="img-responsive" src="img2.png">
  19. <div class="caption text-center"><h5>Image2</h5></div>
  20. </div>
  21. <!-- ...... -->
  22. </div>
  23. </div>
  24. <script src="http://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  25. <script src="DragDrop.js"></script>
  26. </body>
  27. </html>

拖放测试脚本(DragDrop.js)

注:脚本依赖的jquery已经在页面里引入。

  1. $(function(){
  2. //拖拽的对象是这些缩略图
  3. var dragable = '.thumbnail';
  4. var $dragable = $(dragable);
  5. //设置可拖拽属性
  6. $dragable.attr('draggable', true);
  7. //响应开始拖拽事件
  8. $dragable.on('dragstart', setDragData);
  9. //拖放的目标也是这些缩略图
  10. var $dropable = $dragable;
  11. //让目标允许拖放
  12. $dropable.on('dragover', allowDrop);
  13. //响应拖放事件
  14. $dropable.on('drop', dropDragData);
  15. //开始拖拽事件处理
  16. function setDragData(e){
  17. var $target = getDragable(e.target);
  18. //传递被拖拽对象的位置索引
  19. e.originalEvent.dataTransfer.setData("text",$target.index());
  20. }
  21. function allowDrop(e){
  22. e.preventDefault();//这样就能允许拖放
  23. }
  24. //拖放事件处理:把被拖拽对象放到目标对象所在的位置,即实现拖拽排序。
  25. function dropDragData(e){
  26. e.preventDefault();//阻止默认的放置行为
  27. var $target = getDragable(e.target);
  28. var dragIdx = e.originalEvent.dataTransfer.getData("text");
  29. if (dragIdx !== $target.index()){
  30. var $draged = $(dragable).eq(dragIdx);
  31. if ($draged.index() > $target.index()){
  32. $target.before($draged);//向前拖:放在目标对象的前面
  33. }else{
  34. $target.after($draged);//向后拖:放在目标对象的后面
  35. }
  36. }
  37. }
  38. //获取可拖拽对象
  39. function getDragable(dom){
  40. var $dragable = $(dom);
  41. if (!$dragable.is(dragable)){
  42. //拖拽子元素时定位到父元素
  43. $dragable = $dragable.closest(dragable);
  44. }
  45. return $dragable;
  46. }
  47. });

总结

上例的拖放效果在最新的ChromeIEQQ浏览器下测试了都很正常,但在FireFox下拖放图片会激活一个新的页签(有人说使用e.preventDefault()可以解决,但我试了没有效果)。

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注