logo标签列表

简单的拖放代码

javascriptdrag-and-dropdraggabledrag
11

我在一个看似简单的JavaScript练习中挣扎，即编写纯JS拖放功能。我认为我的 'addeventlisteners' 函数出现了错误，这是我的代码：

var ele = document.getElementsByClassName ("target")[0];
var stateMouseDown = false;
//ele.onmousedown = eleMouseDown;
ele.addEventListener ("onmousedown" , eleMouseDown , false);

function eleMouseDown () {
    stateMouseDown = true;
    document.addEventListener ("onmousemove" , eleMouseMove , false);
}

function eleMouseMove (ev) {
    do {
        var pX = ev.pageX;
        var pY = ev.pageY;
        ele.style.left = pX + "px";
        ele.style.top = pY + "px";
        document.addEventListener ("onmouseup" , eleMouseUp , false);
    } while (stateMouseDown === true);
}

function eleMouseUp () {
    stateMouseDown = false;
    document.removeEventListener ("onmousemove" , eleMouseMove , false);
    document.removeEventListener ("onmouseup" , eleMouseUp , false);
}
5个回答
12
这是一个正常工作的jsfiddle链接：http://jsfiddle.net/fpb7j/1/ 主要问题有两个，第一个是使用了onmousedown、onmousemove和onmouseup。我认为这些只应该用于附加事件：
document.body.attachEvent('onmousemove',drag);

当 mousedown，mousemove 和 mouseup 发生时，它们会触发事件监听器：

document.body.addEventListener('mousemove',drag);
第二个问题是在move事件函数中使用了do-while循环。该函数每次鼠标移动一个像素时都会调用一次，因此不需要使用循环：

第二个问题是在move事件函数中使用了do-while循环。该函数每次鼠标移动一个像素时都会调用一次，因此不需要使用循环：

var ele = document.getElementsByClassName ("target")[0];
ele.addEventListener ("mousedown" , eleMouseDown , false);

function eleMouseDown () {
    stateMouseDown = true;
    document.addEventListener ("mousemove" , eleMouseMove , false);
}

function eleMouseMove (ev) {
    var pX = ev.pageX;
    var pY = ev.pageY;
    ele.style.left = pX + "px";
    ele.style.top = pY + "px";
    document.addEventListener ("mouseup" , eleMouseUp , false);
}

function eleMouseUp () {
    document.removeEventListener ("mousemove" , eleMouseMove , false);
    document.removeEventListener ("mouseup" , eleMouseUp , false);
}

顺便说一下，我不得不将目标位置设置为绝对定位才能使其起作用。

感谢您的详细回复。我正在使用Do While来监测鼠标移动，只有在鼠标按下时才应该运行... 如果我启用Do While循环，Firefox就会停止响应。 - Kayote
@Kayote 我明白了，但由于 mousemove 事件调用 eleMouseMove() 的频率很高，所以这不是必要的。 - iRector
我根据自己的需求对其进行了一些更新。这对其他人也可能有帮助，因此在http://jsfiddle.net/kjwLe9bq/中分享。 - Savaratkar
这是很久以前的事情，但值得注意的是（正如最后一条评论中的代码所示），mouseup事件监听器应该在eleMouseDown函数中添加，而不是在eleMouseMove中添加；后者被频繁调用，您不希望每次用户移动鼠标时都添加一个mouseup监听器。 - Steven Stadnicki
避免在初始鼠标移动时跳跃的版本：http://jsfiddle.net/fpb7j/308/ - Zach Saucier
12

您也可以尝试这个 fiddle，http://jsfiddle.net/dennisbot/4AH5Z/

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titulo de mi pagina</title>
<style>
    #target {
        width: 100px;
        height: 100px;
        background-color: #ffc;
        border: 2px solid blue;
        position: absolute;
    }
</style>
<script>
   window.onload = function() {
        var el = document.getElementById('target');
        var mover = false, x, y, posx, posy, first = true;
        el.onmousedown = function() {
            mover = true;
        };
        el.onmouseup = function() {
            mover = false;
            first = true;
        };
        el.onmousemove = function(e) {
            if (mover) {
                if (first) {
                    x = e.offsetX;
                    y = e.offsetY;
                    first = false;
                }
                posx = e.pageX - x;
                posy = e.pageY - y;
                this.style.left = posx + 'px';
                this.style.top = posy + 'px';
            }
        };
   }
</script>
</head>
<body>
    <div id="target" style="left: 10px; top:20px"></div>
</body>
</html>
为什么要使用 offsetX/Y？ - Ian Warburton
停止可拖动对象跳到鼠标指针。我明白了。 - Ian Warburton
1

我只是制作了一个简单的拖动功能。

它只需要一行代码，可以处理鼠标偏移量、onDrag/onStop回调函数以及SVG元素的拖动。

以下是代码：

// simple drag
function sdrag(onDrag, onStop) {
    var startX = 0;
    var startY = 0;
    var el = this;
    var dragging = false;

    function move(e) {
        el.style.left = (e.pageX - startX ) + 'px';
        el.style.top = (e.pageY - startY ) + 'px';
        onDrag && onDrag(el, e.pageX, startX, e.pageY, startY);
    }

    function startDragging(e) {
        if (e.currentTarget instanceof HTMLElement || e.currentTarget instanceof SVGElement) {
            dragging = true;
            var left = el.style.left ? parseInt(el.style.left) : 0;
            var top = el.style.top ? parseInt(el.style.top) : 0;
            startX = e.pageX - left;
            startY = e.pageY - top;
            window.addEventListener('mousemove', move);
        }
        else {
            throw new Error("Your target must be an html element");
        }
    }

    this.addEventListener('mousedown', startDragging);
    window.addEventListener('mouseup', function (e) {
        if (true === dragging) {
            dragging = false;
            window.removeEventListener('mousemove', move);
            onStop && onStop(el, e.pageX, startX, e.pageY, startY);
        }
    });
}

Element.prototype.sdrag = sdrag;

并且使用它：

document.getElementById('my_target').sdrag();

您还可以使用onDrag和onStop回调函数：

document.getElementById('my_target').sdrag(onDrag, onStop);

查看我的存储库，了解更多详情: https://github.com/lingtalfi/simpledrag

1

这就是我做的方式

var MOVE = {
  startX: undefined,
  startY: undefined,
  item: null
};

function contentDiv(color, width, height) {
  var result = document.createElement('div');
  result.style.width = width + 'px';
  result.style.height = height + 'px';
  result.style.backgroundColor = color;
  return result;
}

function movable(content) {
  var outer = document.createElement('div');
  var inner = document.createElement('div');
  outer.style.position = 'relative';
  inner.style.position = 'relative';
  inner.style.cursor = 'move';
  inner.style.zIndex = 1000;
  outer.appendChild(inner);
  inner.appendChild(content);
  inner.addEventListener('mousedown', function(evt) {
    MOVE.item = this;
    MOVE.startX = evt.pageX;
    MOVE.startY = evt.pageY;
  })
  return outer;
}

function bodyOnload() {
  document.getElementById('td1').appendChild(movable(contentDiv('blue', 100, 100)));
  document.getElementById('td2').appendChild(movable(contentDiv('red', 100, 100)));
  document.addEventListener('mousemove', function(evt) {
    if (!MOVE.item) return;
    if (evt.which!==1){ return; }
    var dx = evt.pageX - MOVE.startX;
    var dy = evt.pageY - MOVE.startY;
    MOVE.item.parentElement.style.left = dx + 'px';
    MOVE.item.parentElement.style.top = dy + 'px';
  });
  document.addEventListener('mouseup', function(evt) {
    if (!MOVE.item) return;
    var dx = evt.pageX - MOVE.startX;
    var dy = evt.pageY - MOVE.startY;
    var sty = MOVE.item.style;
    sty.left = (parseFloat(sty.left) || 0) + dx + 'px';
    sty.top = (parseFloat(sty.top) || 0) + dy + 'px';
    MOVE.item.parentElement.style.left = '';
    MOVE.item.parentElement.style.top = '';
    MOVE.item = null;
    MOVE.startX = undefined;
    MOVE.startY = undefined;
  });
}
bodyOnload();
table {
user-select: none
}
<table>
  <tr>
    <td id='td1'></td>
    <td id='td2'></td>
  </tr>
</table>

在拖动时，被拖动元素的parentElement的style中的left和right不断更新。然后，在mouseup（='drop'）时，“提交更改”，我们将父级的（水平和垂直）位置更改（即left和top）添加到元素本身的位置中，然后再次清除父级的left/top。这样，我们只需要JavaScript变量pageX、pageY（拖动开始时的鼠标位置），关于拖动开始时元素位置的信息，我们不需要JavaScript变量（只需将该信息保存在DOM中）。
如果你正在处理SVG元素，可以使用相同的parent/child/commit技术。只需使用两个嵌套的g，并使用transform=translate(dx,dy)而不是style.left=dx，style.top=dy。
当然，你应该使用CSS类而不是内联样式。把它看作是“快速而肮脏”的解决方案。 - mathheadinclouds
-2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接