HTML 5 拖放

2017-07-04 本文已影响0人 Devour_z

拖放：抓取对象以后拖到另一个位置

浏览器支持###

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注释：在 Safari 5.1.2 中不支持拖放。

设置元素为可拖放#####

首先，为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true" />

拖动什么 ondragstart()和set Data()#####

规定元素被拖动时会发生什么
ondragstart() -- 拖拽前触发
set Data() -- 设置数据key和value

<body>
    <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />
</body>
<script>
function drag(ev) {
    ev.dataTransfer.setData("Text",ev.target.id);
}
</script>

放到何处 ondragover#####

ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault()方法

进行放置 ondrop#####

当放置被拖数据时，会发生 drop 事件。

<body>
    <div id="div1" ondrop="drop(event)"  ondragover="allowDrop(event)"></div>
 </body>
<script>
   function drop(ev){
      ev.preventDefault();
      var data=ev.dataTransfer.getData("Text");
      ev.target.appendChild(document.getElementById(data));
   }
</script>

demo###

<!DOCTYPE HTML>
<html>
    <head>
    <script type="text/javascript">
        function allowDrop(ev){
              ev.preventDefault();
        }

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

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

       <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
      <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />

</body>
</html>

**代码解释####