drag element - 爱码网

<div id="logDiv" draggable="true" style="border: 2px dotted red; width: 100%; height: 30%; z-index: 10000; box-sizing: border-box; top: 60%; position: absolute; overflow-y: scroll; -webkit-user-drag: element;" class=""></div>

                    that.logDiv.addEventListener('dragstart',that._start,true);
                    that.logDiv.addEventListener('touchstart',that._start,false);


                    that.logDiv.addEventListener('drag',that._drag.bind(that),false);
                    that.logDiv.addEventListener('touchmove',that._drag.bind(that),false);

                    that.logDiv.addEventListener('dragend',that._end.bind(that),false);
                    that.logDiv.addEventListener('touchend',that._end.bind(that),false);


                    that.logDiv.addEventListener('click',that._click.bind(that),true);

demo

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <div id="container">
  <div id="div1"></div>
  </div>
</body>
</html>

#div1{
  width:20px;
  height:20px;
  border:1px solid red;
  margin-left:10px;
  margin-top:10px;
  position:absolute;
}

#container
{
  border:1px solid black;
  margin-top:10px;
  margin-left:10px;
  position:relative;
}

body{
  margin:0 0 0 0;
  padding:0 0 0 0;
  
}

window.start=0;
var div1=document.getElementById('div1');
div1.addEventListener('mousedown',function(evnt){
  
 window.start=1;
  evnt=evnt||window.event;
        window.x=parseInt(evnt.clientX);
        window.y=parseInt(evnt.clientY);
  
  window.dx=x-div1.offsetLeft;
  window.dy=y-div1.offsetTop;
  
},true);



document.addEventListener('mousemove',function(evnt){

if(window.start)
  {
       div1.style.left= evnt.clientX - window.dx +"px";
   div1.style.top= evnt.clientY -window.dy +"px";
  }

    

  
  
},true);



document.addEventListener('mouseup',function(event){
    window.start = 0;
},true);

https://developer.mozilla.org/en-US/docs/Web/Events/dragstart

https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/DragAndDrop.html

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW24

JS Bin on jsbin.com