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

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

拖放测试页面(DragDrop.html)

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

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

拖放测试脚本(DragDrop.js)

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
$(function(){
  //拖拽的对象是这些缩略图
  var dragable = '.thumbnail';
  var $dragable = $(dragable);
  //设置可拖拽属性
  $dragable.attr('draggable', true);
  //响应开始拖拽事件
  $dragable.on('dragstart', setDragData);
  //拖放的目标也是这些缩略图
  var $dropable = $dragable;
  //让目标允许拖放
  $dropable.on('dragover', allowDrop);
  //响应拖放事件
  $dropable.on('drop', dropDragData);

  //开始拖拽事件处理
  function setDragData(e){
    var $target = getDragable(e.target);
    //传递被拖拽对象的位置索引
    e.originalEvent.dataTransfer.setData("text",$target.index());
  }
  
  function allowDrop(e){
    e.preventDefault();//这样就能允许拖放
  }
  
  //拖放事件处理：把被拖拽对象放到目标对象所在的位置，即实现拖拽排序。
  function dropDragData(e){
    e.preventDefault();//阻止默认的放置行为
    var $target = getDragable(e.target);
    var dragIdx = e.originalEvent.dataTransfer.getData("text");
    if (dragIdx !== $target.index()){
      var $draged = $(dragable).eq(dragIdx);
      if ($draged.index() > $target.index()){
        $target.before($draged);//向前拖：放在目标对象的前面
      }else{
        $target.after($draged);//向后拖：放在目标对象的后面
      }
    }
  }
  //获取可拖拽对象
  function getDragable(dom){
    var $dragable = $(dom);
    if (!$dragable.is(dragable)){
      //拖拽子元素时定位到父元素
      $dragable = $dragable.closest(dragable);
    }
    return $dragable;
  }
});

总结

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