可移动/可拖动<div>
这是我的更新和修改的脚本，它的工作原理是完全的，除了我想普及它…观察****我怎么能使它，所以我不必做function(e){BOX.Draggable.elemen = e.target || e.srcElement; elementDraggable(e); function(e){BOX.Draggable.elemen = e.target || e.srcElement; elementDraggable(e); 每次我需要使用不同元素的可拖动function？
window.onload = addListeners; var BOX = function(){ return{ Draggable: function(){} }; }(); function addListeners(){ document.getElementById('div').addEventListener('contextmenu', menumove, false); **document.getElementById('div').addEventListener('mousedown', function(e){BOX.Draggable.elemen = e.target || e.srcElement; elementDraggable(e);}, false);** } function elementDraggable(e){ var e = e || window.event; var div = BOX.Draggable.elemen; BOX.Draggable.innerX = e.clientX + window.pageXOffset - div.offsetLeft; BOX.Draggable.innerY = e.clientY + window.pageYOffset - div.offsetTop; window.addEventListener('mousemove', elementMove, false); window.addEventListener('mouseup', function(){ window.removeEventListener('mousemove', elementMove, false); }, true); function elementMove(e){ div.style.position = 'absolute'; div.style.left = e.clientX + window.pageXOffset - BOX.Draggable.innerX + 'px'; div.style.top = e.clientY + window.pageYOffset - BOX.Draggable.innerY + 'px'; } }
jQuery是你的select吗？ 由于代码已经存在，它使得你所做的事情非常简单。
http://jqueryui.com/demos/draggable/
演示
JavaScript代码
window.onload = addListeners; function addListeners(){ document.getElementById('dxy').addEventListener('mousedown', mouseDown, false); window.addEventListener('mouseup', mouseUp, false); } function mouseUp() { window.removeEventListener('mousemove', divMove, true); } function mouseDown(e){ window.addEventListener('mousemove', divMove, true); } function divMove(e){ var div = document.getElementById('dxy'); div.style.position = 'absolute'; div.style.top = e.clientY + 'px'; div.style.left = e.clientX + 'px'; }
这是一个很好的没有jQuery的脚本来拖动div： http : //jsfiddle.net/g6m5t8co/1/
<!doctype html> <html> <head> <style> #container { position:absolute; background-color: blue; } #elem{ position: absolute; background-color: green; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; } </style> <script> var mydragg = function(){ return { move : function(divid,xpos,ypos){ divid.style.left = xpos + 'px'; divid.style.top = ypos + 'px'; }, startMoving : function(divid,container,evt){ evt = evt || window.event; var posX = evt.clientX, posY = evt.clientY, divTop = divid.style.top, divLeft = divid.style.left, eWi = parseInt(divid.style.width), eHe = parseInt(divid.style.height), cWi = parseInt(document.getElementById(container).style.width), cHe = parseInt(document.getElementById(container).style.height); document.getElementById(container).style.cursor='move'; divTop = divTop.replace('px',''); divLeft = divLeft.replace('px',''); var diffX = posX - divLeft, diffY = posY - divTop; document.onmousemove = function(evt){ evt = evt || window.event; var posX = evt.clientX, posY = evt.clientY, aX = posX - diffX, aY = posY - diffY; if (aX < 0) aX = 0; if (aY < 0) aY = 0; if (aX + eWi > cWi) aX = cWi - eWi; if (aY + eHe > cHe) aY = cHe -eHe; mydragg.move(divid,aX,aY); } }, stopMoving : function(container){ var a = document.createElement('script'); document.getElementById(container).style.cursor='default'; document.onmousemove = function(){} }, } }(); </script> </head> <body> <div id='container' style="width: 600px;height: 400px;top:50px;left:50px;"> <div id="elem" onmousedown='mydragg.startMoving(this,"container",event);' onmouseup='mydragg.stopMoving("container");' style="width: 200px;height: 100px;"> <div style='width:100%;height:100%;padding:10px'> <select id=test> <option value=1>first <option value=2>second </select> <INPUT TYPE=text value="123"> </div> </div> </div> </body> </html>
那么，你的移动代码简化为：
div.style.position = "absolute"; div.style.top = e.clientY - (e.clientY - div.offsetTop) + "px"; div.style.left = e.clientX - (e.clientX - div.offsetLeft) + "px";
这里的基本mathe.clientX和e.clientY对这里的位置是完全没有影响的，所以你只需要把offsetLeft重新分配给style.left ，对于top来说也是一样的。 因此没有任何运动。
你需要做的是在mousedown发生的时候保存clientX和clientY ，并根据这个进行相减。
哦，你也设置事件监听器错误。 现在的方式是，你运行divMove一次，返回值（这里undefined ）是作为监听器附加的函数。 相反，使用function(e) {divMove(dxy,e || window.event);} 。
“niente00”代码的另一种方法。
init : function(className){ var elements = document.getElementsByClassName(className); for (var i = 0; i < elements.length; i++){ elements[i].onmousedown = function(){mydragg.startMoving(this,'container',event);}; elements[i].onmouseup = function(){mydragg.stopMoving('container');}; } }
