拖放元素定位

Question

所以我正在（和一个朋友）用纯 JS 为 HTML 编写带有元素（这里是按钮）的拖放系统。然后我意识到，如果我在这个页面上有多个元素怎么办？答：所有这些都受到影响。所以我说……好吧！我只是越来越多地为 id 添加一个值，然后整个事情就不会干扰了。

所以现在我遇到了问题，我不知道哪个元素被定位...或者更好：哪个 id 被定位。

PS：请只使用 JS，不要 JQuery 也不要框架。

PPS：（我已经通过 Whosebug 等查看了这种情况，没有什么非常适合我的情况，至少我没有找到）

    var pressed = 0;

    function drag(state){
        if(state == true){
           pressed = 1;
        }
        else{
           pressed = 0;
        }
    }
  var obj = "";
    onmousemove = function(a){
        if(pressed == 1){
    obj = document.getElementById("move1"); //<-- This var (obj) needs to be "flexible" to any element, not only the element with the id "move1"
            var x = a.clientX - parseInt(obj.style.width) / 2;
            var y = a.clientY - parseInt(obj.style.height) / 2;
            obj.style.left = x + "px";
            obj.style.top = y + "px";
        }
    }

var counter = 0;

function createbutton() {
counter++;
document.getElementById("surface").innerHTML += "<button id = 'move" + counter + "' style = 'width: 100px; height: 100px; background-color: blue; border: none; position: fixed;' onmousedown = 'drag(true)' onmouseup = 'drag(false)' onClick = 'drag(false)'>Move this Button</button>";
}

` 注意：这不包括 HTML 因为不知何故 Whosebug 无法正常显示，所以只有 JS，请访问 JSFiddle 查看完整内容（创建多个按钮并拖动最后一个！）：https://jsfiddle.net/2nyc4a83/

Answer 1

我给你的函数添加了一个新参数 drag()。在 onmousedown、onmouseup 和 onClick 事件中，id当前对象的将用作 drag() 的参数。这在代码中的外观示例：<button ... onmousedown = 'drag(true, this.id)'>Move this button</button>

然后 id 将保存在全局变量中，以便您稍后可以在 onmousemove 函数中访问它，如下所示：

obj = document.getElementById(obj_id);

-> jsfiddle

拖放元素定位

Drag 'n Drop Element targeting

javascript

html

drag-and-drop

targeting