原生js及H5模拟鼠标点击拖拽

一.原生js

1、拖拽的流程动作

• 鼠标按下 触发onmousedown事件
• 鼠标移动 触发onmousemove事件
• 鼠标松开 触发onmouseup事件

2、注意事项：

• 要防止div移出可视框，要限制div移动的横纵坐标； 
• 防止火狐的bug, 要在最后写上return false，阻止默认事件； 
• 防止鼠标运动时移出div，所以要用document.onmousemove和document.onmouseup，不能用oDiv.onmousemove;

3、代码实现：

html：

<div id='box' style="position:relative;width:100px;height:100px;background:#ee735c;">  <!--为了设置left、top，需相对或绝对定位-->
      可拖动div元素
</div>

js：

window.onload = function() {
                var box = document.getElementById('box')

                box.onmousedown = function(e) { //首先要获取鼠标相对于元素的位置
                    var disX = e.clientX - box.offsetLeft //clientX,Y鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标）
                    var disY = e.clientY - box.offsetTop //offsetLeft,top是元素相对父元素的偏移宽度

                    document.onmousemove = function(e) { 
                        var l = e.clientX - disX
                        var t = e.clientY - disY

                        if(l < 0) { //防止div跑出可视框
                            l = 0;
                        } else if(l > document.documentElement.clientWidth - box.offsetWidth) {
                            l = document.documentElement.clientWidth - box.offsetWidth;
                        }

                        if(t < 0) {
                            t = 0;
                        } else if(t > document.documentElement.clientHeight - box.offsetHeight) {
                            t = document.documentElement.clientHeight - box.offsetHeight;
                        }

                        box.style.left = l + 'px';
                        box.style.top = t + 'px';
                    }
                    
                    document.onmouseup = function() {
                        document.onmousemove = null;
                        document.onmouseup = null
                    }
                    
                    return false
                }
            }

 

二.H5 drag和drop拖放

拖放是html5的标准，任何元素都能够拖放

 

html：

        <div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
            <img src="img/2.jpg" draggable="true" ondragstart="drag(event)" id="drag1" />   //设置元素可拖放
        </div>
        <div class="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

js：

function drag(ev) {  //ondragstart拖动开始
                ev.dataTransfer.setData("ok", ev.target.id); //设置元素属性
            }
            
            function allowDrop(ev) { //ondragover拖动结束
                ev.preventDefault(); //默认不许放置，阻止默认
            }

            function drop(ev) {     //ondrop放置
                ev.preventDefault();
                var data = ev.dataTransfer.getData("ok");  //加入元素
                ev.target.appendChild(document.getElementById(data));
            }