기본 js 및 H5 시뮬레이션 마우스 클릭 드래그

하나.원생 js

<div id='box' style="position:relative;width:100px;height:100px;background:#ee735c;">  
         div  
div>

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 드래그 앤 드롭

        <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>

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));
            }