Question

我正在进行拖放操作，当我删除元素时，我需要知道哪个容器收到了一个新元素。但是当我在容器上放一些东西时，我只得到拖拽的元素e.target ...

如何在不向HTML添加任何内容的情况下知道哪个容器收到了拖动的元素？我对使用jQuery或其他库不感兴趣。我想了解这是如何工作的。

jsFiddle：http://jsfiddle.net/mzm206w4/1/

代码：

HTML：

<div id="drag">dragme</div>
<div class="drop">drop here!</div>
<div class="drop">drop here!</div>
<div class="drop">drop here!</div>

JavaScript的：

var drag = document.getElementById('drag');
var dragSize = drag.getBoundingClientRect();

drag.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);

function mouseUp(e) {
    window.removeEventListener('mousemove', divMove, true);
    var target = e.target;
    console.log(target);  // <---------- here I always get "div#drag"
}

function mouseDown(e) {
    window.addEventListener('mousemove', divMove, true);
}

function divMove(e) {
    drag.style.top = e.clientY - dragSize.height / 2 + 'px';
    drag.style.left = e.clientX - dragSize.width / 2 + 'px';
}

Answer 1

一些jquery怎么样？您应该可以使用this.id

$(".droppable").droppable({
    drop: function(event, ui) {
        $(this).addClass("ui-state-highlight").find("p").html("Dropped in " + this.id);
    }
});

请参阅此fiddle

Source

更新：我认为我发现了您的问题。

你想这样做：

e.target.id

而不是e.target

更新：如果您愿意在html中添加一些代码，可以使用ondrop="drop(event)"

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">

</body>
</html>

More info

更新：Native HTML only method

检测目标容器的下降

jsFiddle：http://jsfiddle.net/mzm206w4/1/

1 个答案: