html5+原生js实现拖放与拖拽功能_js 拖拽编辑器-CSDN博客

本文链接：https://blog.csdn.net/Dijason/article/details/8880796

html5+原生js实现拖放与拖拽功能

利用了html5的draggable属性，已经ondragstart, ondrop, ondrag这3个事件。

我是在chrome v28下做测试的。

完整代码如下：

<!doctype html>
<html>
    <head>
        <title>test</title>
        <meta content="text/html; charset=gb2312"/>
        <script type="text/javascript">
            window.onload = function(){
                // 拖放
                var wrapper = document.getElementById("wrapper");
                var box = document.getElementById("box");
                box.ondragstart = function(e){
                    e.dataTransfer.setData("moveDataId", e.target.id);
                };
                
                wrapper.addEventListener('drop', function(e){
                    e.preventDefault();
                    var md = e.dataTransfer.getData("moveDataId");
                    e.target.appendChild(document.getElementById(md));
                });
                
                wrapper.addEventListener('dragover', function(e){
                    e.preventDefault();
                });
                //
                //拖拽
                var toMove = document.getElementById("moved-box"), mvID, ox, oy, mvtarget;
                
                toMove.addEventListener('dragstart', function(e){
                    mvID = e.target.id;
                    ox = e.clientX - e.target.offsetLeft;
                    oy = e.clientY - e.target.offsetTop;
                    console.log(ox);
                });
                
                document.addEventListener('dragover', function(e){
                    e.preventDefault();
                });
                
                document.addEventListener('drop', function(e){
                    e.preventDefault();
                    mvtarget = document.getElementById(mvID);
                    mvtarget.style.top = e.clientY - oy + "px";
                    mvtarget.style.left = e.clientX - ox + "px";
                });
            }
        </script>
        <style type="text/css">
            .box-class {
                width: 50px;
                height: 50px;
                background-color: yellow;
            }
            
            #wrapper {
                margin-top: 50px;
                width: 100px;
                height: 100px;
                border: 5px solid black;
            }
            
            .to-move {
                width: 50px;
                height: 50px;
                background-color: green;
                position: absolute;
            }
        </style>
        <script src="jquery.js" type="text/javascript">
        </script>
    </head>
    <body>
        <div id="wrapper">
        </div>
        <div id="box" class="box-class" draggable="true">
        </div>
        <div id="moved-box" class="to-move" draggable="true">
        </div>
    </body>
</html>