html5 “拖放”

痛定思痛。 2021-11-02 13:46 454阅读 0赞

拖放主要是两个部分组成，drag：拖动，drop：放置！既抓取元素后拖到另一个位置！

要实现拖放首先要把被拖动元素设置为可拖动，既：

draggbile="true"

然后要拖动什么：ondragstart()和setData(),要放到何处：ovdragover(),然后代码将获取的元素进行放置：ondrop();

下面是一个拖动实例，(来回拖放)

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>html5 拖动</title>
    </head>
    <style type="text/css">
    .top{
         width: 700px;height: 160px;border: solid #ccc 1px;margin: 20px 0 0 20px;}
    .img1{
         margin: 20px 0 0 20px;}
    </style>
    <script type="text/javascript">
    /*
    *被拖动数据是被拖动元素的ID;
    *ondrop():当元素进行放置时发生
    *ondragstart()：当元素被拖动时发生
    *ondragover():规定在何处放置被拖动元素时发生
    */
    function allowDrop(ev){
      //设置拖动到何处触发的事件“ondragover”,避免浏览器对元素的默认处理，（浏览器对元素的默认处理是以链接的方式打开）
      ev.preventDefault();
    }
    function drag(ev){
      //设置被拖动元素触发事件"ondragstart"和"setData"
      ev.dataTransfer.setData("Text",ev.target.id);//通过setData来设置被拖动数据的数据类型和值;"Text":数据类型，值是被拖动元素的id
    }
    function drop(ev){
      //设置元素被放置时发生的事件
      ev.preventDefault();//避免浏览器对元素的默认处理
      var data=ev.dataTransfer.getData("Text");//通过dataTransfer.getData()来获取被拖动元素的数据，该方法返回在dataTransfer.setData()中设置为相同类型的数据
      ev.target.appendChild(document.getElementById(data));//把被拖动元素追加到目标元素中
    }
    </script>
    <body>
    <div class="top" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img src="images/img.png" id="drag1" ondragstart="drag(event)" class="img1" draggable="true">
    </div>
    <div class="top" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </body>
    </html>

转载于:https://www.cnblogs.com/return-false/p/3326282.html