<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