Question

我正在使用拖放功能。我可以在两个不同的目标上放下一个元素。为了简化代码，我认为最好只有一个drop函数，在其中我查找元素被删除的位置。但是，我是Javascript DOM操作的新手，不知道如何实现这一点。

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.innerHTML);
    var data = ev.dataTransfer.getData("text");
}

function drop(ev) {
    ev.preventDefault();
    var username = ev.dataTransfer.getData("text");
    var type = ev.target.innerHTML;  //<====== ?? what's the proper way to do this?
    alert("Adding " + username +" to chat. Type: "+ type); 
    socket.emit('add to convo',username);
}

这是HTML：

  <div id = "dragboxes">
      <div id="samechatbox" ondrop="drop(event)" ondragover="allowDrop(event)">
          <p> Add to <b>This</b> Chat </p>
      </div>
      <div id="newchatbox" ondrop="drop(event)" ondragover="allowDrop(event)">
          <p> Add to <b>New</b> Chat </p>
      </div>
  </div>

所以在drop函数中，我希望能够检索目标ID，“samechatbox”或“newchatbox”。

Answer 1

使用target.id。我认为这就是你要找的东西。对于你所描述的内容，你不应该innerHtml。

Answer 2

我使用sortable做了同样的事。

这是以下代码。我认为它会对你有所帮助：

 $(function() {
                $( ".droppable" ).sortable({
                    connectWith: ".droppable",
                    receive: function(e, ui) {
                        alert($(e.target).attr('id'));  //it give the id of dropped location
                        console.log(ui.item[0].id);  // it gived the id of dropped object
                    }
                })
            });

拖放：获取目标属性（ID，内部HTML）

2 个答案: