JS中drap/drop实现元素拖动功能,怎么写元素可拖动功能...

2020-01-03宗九尘博客web前端1029

- N +

请记住投稿邮箱是：203239351@qq.com 注册联系QQ203239351

JS实现元素拖动功能：

网页中有时候需要运用到元素拖动功能，而web前端中，JS中提供了drop和drap来写元素拖拽放置功能。

JS实现拖拽和放置功能演示：

拖动前的效果图：

拖动后的效果图：

JS实现元素拖动功能代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>JS实现图形(元素)拖动功能----宗波尘客www.zbck123.com</title>
    <style type="text/css">
        #div1 {width:350px;height:100px;padding:10px;border:1px solid #aaaaaa;}
        #div2 {width:350px;height:100px;padding:10px;border:1px solid #aaaaaa;}
        #div3 {width:350px;height:100px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    <script>
        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>

<p>拖动图片到矩形框中:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">方框一</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">方框二</div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">方框三</div>
<br>
<img id="drag1" src="https://www.zbck123.com/zb_users/upload/2019/10/201910011569942388262983.png" draggable="true" ondragstart="drag(event)" width="336" height="69">


<!--我这里用的是img上传的图片，大家使用时可以根据自己要求来做被拖动的元素-->


</body>
</html>

复制