我想在原生 javascript 中创建一个可移动/可拖动的 div，而不使用 jquery 和库。有教程之类的吗？
【问题讨论】：
标签： javascript
好的，这是我用于轻量级部署的个人代码（不允许使用库或出于某种原因过度使用库的项目）。首先，我总是使用这个方便的函数，这样我就可以传递一个 id 或实际的 dom 元素：
function get (el) {
if (typeof el == 'string') return document.getElementById(el);
return el;
}
作为奖励，get() 的输入时间比 document.getElementById() 短，我的代码最终也更短。
第二次意识到大多数库正在做的是跨浏览器兼容性。如果所有浏览器的行为都相同，则代码相当简单。所以让我们编写一些跨浏览器函数来获取鼠标位置：
function mouseX (e) {
if (e.pageX) {
return e.pageX;
}
if (e.clientX) {
return e.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft);
}
return null;
}
function mouseY (e) {
if (e.pageY) {
return e.pageY;
}
if (e.clientY) {
return e.clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop);
}
return null;
}
好的，上面的两个功能是一样的。当然有更好的方法来编写它们，但我现在（相对）保持简单。
现在我们可以编写拖放代码了。我喜欢这段代码的一点是，所有内容都在一个闭包中捕获，因此没有全局变量或辅助函数在浏览器中乱扔垃圾。此外，代码将拖动手柄与被拖动的对象分开。这对于创建对话框等很有用。但如果不需要，您始终可以为它们分配相同的对象。无论如何，这是代码：
function dragable (clickEl,dragEl) {
var p = get(clickEl);
var t = get(dragEl);
var drag = false;
offsetX = 0;
offsetY = 0;
var mousemoveTemp = null;
if (t) {
var move = function (x,y) {
t.style.left = (parseInt(t.style.left)+x) + "px";
t.style.top = (parseInt(t.style.top) +y) + "px";
}
var mouseMoveHandler = function (e) {
e = e || window.event;
if(!drag){return true};
var x = mouseX(e);
var y = mouseY(e);
if (x != offsetX || y != offsetY) {
move(x-offsetX,y-offsetY);
offsetX = x;
offsetY = y;
}
return false;
}
var start_drag = function (e) {
e = e || window.event;
offsetX=mouseX(e);
offsetY=mouseY(e);
drag=true; // basically we're using this to detect dragging
// save any previous mousemove event handler:
if (document.body.onmousemove) {
mousemoveTemp = document.body.onmousemove;
}
document.body.onmousemove = mouseMoveHandler;
return false;
}
var stop_drag = function () {
drag=false;
// restore previous mousemove event handler if necessary:
if (mousemoveTemp) {
document.body.onmousemove = mousemoveTemp;
mousemoveTemp = null;
}
return false;
}
p.onmousedown = start_drag;
p.onmouseup = stop_drag;
}
}
offsetX/offsetY 计算稍微复杂是有原因的。如果您注意到，它只是获取鼠标位置之间的差异并将它们添加回被拖动的 div 的位置。为什么不只使用鼠标位置？好吧，如果你这样做，当你点击它时，div 会跳转到鼠标指针。这是我不想要的行为。
【讨论】：
你可以试试这个
HTML
<div id="one" style="height:50px; width:50px; border:1px solid #ccc; background:red;">
</div>
可拖动 div 的 Js 脚本
window.onload = function(){
draggable('one');
};
var dragObj = null;
function draggable(id)
{
var obj = document.getElementById(id);
obj.style.position = "absolute";
obj.onmousedown = function(){
dragObj = obj;
}
}
document.onmouseup = function(e){
dragObj = null;
};
document.onmousemove = function(e){
var x = e.pageX;
var y = e.pageY;
if(dragObj == null)
return;
dragObj.style.left = x +"px";
dragObj.style.top= y +"px";
};
检查这个Demo
【讨论】：
这段代码修正了鼠标的位置（所以当你开始拖动时，被拖动的对象不会跳跃）并且也适用于触摸屏/手机
var dragObj = null; //object to be moved
var xOffset = 0; //used to prevent dragged object jumping to mouse location
var yOffset = 0;
window.onload = function()
{
document.getElementById("menuBar").addEventListener("mousedown", startDrag, true);
document.getElementById("menuBar").addEventListener("touchstart", startDrag, true);
document.onmouseup = stopDrag;
document.ontouchend = stopDrag;
}
function startDrag(e)
/*sets offset parameters and starts listening for mouse-move*/
{
e.preventDefault();
e.stopPropagation();
dragObj = e.target;
dragObj.style.position = "absolute";
var rect = dragObj.getBoundingClientRect();
if(e.type=="mousedown")
{
xOffset = e.clientX - rect.left; //clientX and getBoundingClientRect() both use viewable area adjusted when scrolling aka 'viewport'
yOffset = e.clientY - rect.top;
window.addEventListener('mousemove', dragObject, true);
}
else if(e.type=="touchstart")
{
xOffset = e.targetTouches[0].clientX - rect.left; //clientX and getBoundingClientRect() both use viewable area adjusted when scrolling aka 'viewport'
yOffset = e.targetTouches[0].clientY - rect.top;
window.addEventListener('touchmove', dragObject, true);
}
}
function dragObject(e)
/*Drag object*/
{
e.preventDefault();
e.stopPropagation();
if(dragObj == null) return; // if there is no object being dragged then do nothing
else if(e.type=="mousemove")
{
dragObj.style.left = e.clientX-xOffset +"px"; // adjust location of dragged object so doesn't jump to mouse position
dragObj.style.top = e.clientY-yOffset +"px";
}
else if(e.type=="touchmove")
{
dragObj.style.left = e.targetTouches[0].clientX-xOffset +"px"; // adjust location of dragged object so doesn't jump to mouse position
dragObj.style.top = e.targetTouches[0].clientY-yOffset +"px";
}
}
function stopDrag(e)
/*End dragging*/
{
if(dragObj)
{
dragObj = null;
window.removeEventListener('mousemove', dragObject, true);
window.removeEventListener('touchmove', dragObject, true);
}
}div{height:400px; width:400px; border:1px solid #ccc; background:blue; cursor: pointer;}<div id="menuBar" >A</div>【讨论】：
<div draggable=true ondragstart="event.dataTransfer.setData('text/plain', '12345')">
drag me
</div>
<div ondragover="return false;" ondrop="this.innerHTML=event.dataTransfer.getData('text/plain')">
drop on me
</div>
【讨论】：