实现元素之间的拖拽 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div {
            width: 500px;
        }

        .div1 {
            float: left;
            height: 200px;
            width: 200px;
            background: #8ab5eb;
        }

        .div2 {
            float: right;
            height: 200px;
            width: 200px;
            background: #8ab5eb;
        }
    </style>
</head>
<body>
<div class="div">
    <div draggable="true" id="div1" class="div1">
        <p id="pe" draggable="true">把我拖拽到右侧</p>
    </div>

    <div id="div2" draggable="true" class="div2">

    </div>
</div>
<script>
  var p = document.querySelector("#pe");
  var div1 = document.querySelector("#div1");
   document.ondragstart=function (e) {
        e.dataTransfer.setData("text/html",e.target.id);
    };
    document.ondrop=function(e){
       var id= e.dataTransfer.getData("text/html");
       e.target.appendChild(document.getElementById(id));

    };
</script>

注意事项：

dataTransfer实现数据的存储于获取
             通过ondragstart方法实现将数据的存储到dataTransfer中 e.dataTransfer.setDate("text/html",e.target.id)
             通过获取只能在ondrop下面取值e.dataTransfer.getData("text/html")通过e.target.appendChild(document.getElementById)
实现此功能的必须要在需要拖拽的元素上加上一个属性 draggable="true"
以上代码被拖动的元素必须有id,没有id则拖拽不成功
posted @ 2019-04-14 14:00  null-sy  阅读(188)  评论(0)  编辑  收藏  举报