HTML5-drag/drop

浏览器支持情况

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support drag and drop.

Note: Drag and drop does not work in Safari 5.1.7 and earlier versions.

drag

1、设置元素可拽托：

<div draggable="true" id="dragme"></div>

2、设置元素拽托时发生的事情，通过属性ondragstart设置：

<div draggable="true" id="dragme" ondragstart="drag(event)"></div>

3、如果需要传值，通过事件属性的方法 - dataTransfer.setData()传递:

function drag(evt) {
  evt.dataTransfer.setData("text/html", ev.target.id);
}

drop

1、设置元素属性ondrop 和 ondragover

<div id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

2、ondragover 用于设置where the dragged data can be droped，设置此属性是用来阻止元素的默认处理（默认情况下，data/element是不允许drop到其他元素中），使元素可以被放置：

function allowDrop(evt) {
  evt.preventDefault();
}

3、当元素放置的时候，通过ondrop属性处理drop事件：

function drop(evt) {
    evt.preventDefault(); //default is open as link on drop
    var data = evt.dataTransfer.getData("text/html"); //获得传递的数据
    evt.target.appendChild(document.getElementById(data));
}

例子

<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
  #drop1,
  #drop2 {
    width: 5em;
    height: 5em;
    border: 1px solid #aaaaaa;
    margin: 1em;
    padding: 1em;
    text-align: center;
    line-height: 5em;
    float: left;
  }
  </style>
  <script type="text/javascript">
  function allowDrop(evt) {
    evt.preventDefault();
  }

  function drag(evt) {
    evt.dataTransfer.setData("Text", evt.target.id);
  }

  function drop(evt) {
    evt.preventDefault();
    var data = evt.dataTransfer.getData("Text");
    evt.target.appendChild(document.getElementById(data));
  }
  </script>
</head>

<body>
  <div id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <div id="dragme" draggable="true" ondragstart="drag(event)">drag me</div>
  </div>
  <div id="drop2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>

</html>