Javascript 如何在drop-over div上删除拖动的div

我有一个程序，可以动态地拖动

。我试图在id=“trash”

我尝试过这样做，但它只是删除了trash div：

      $(function() {
    
    var trash = document.getElementById('trash');

    $(trash).droppable({
      drop: function( event, ui ) { 
             $(this).remove("div");
      }
    });
  });

我试图识别正在删除的
，但不确定如何执行

这是我的全部代码：


函数addElement（）{
var text=document.getElementById（“输入”）.value；
//创建一个新的div元素并给它一个唯一的id
var newDiv=document.createElement（“div”）；
newDiv.id='temp'
//给它一些内容
var newContent=document.createTextNode（文本）；
//将文本节点添加到新创建的div
newDiv.appendChild（newContent）；
//将新创建的元素及其内容添加到DOM中
var currentDiv=document.getElementById（“div1”）；
document.body.insertBefore（newDiv，currentDiv）；
$（函数（）{
var td=document.getElementsByTagName（'td'）；
var div=document.getElementsByTagName（'div'）；
$（div.draggable（）；
$（“#temp”）.draggable（）；
$（td）.可拖放({
drop:函数（事件，ui）{
$（本）
.addClass（“div”）
.html（文本）；
$（“div”）.draggable（）；
$（“#temp”）.remove（）；
}
});
});
document.getElementById（“输入”）.value=“”；
$（函数（）{
$（“td”）.dblclick（函数（e）{
e、 停止传播（）；
var currentEle=$（此值）；
var value=$（this.html（）；
updateVal（当前元素，值）；
});
});
函数updateVal（currentEle，value）{
$（currentEle.html（“”）；
$（“.thVal”）.focus（）；
$（“.thVal”）.keyup（函数（事件）{
如果（event.keyCode==13）{
$（currentEle）.html（$（“.thVal”）.val（）.trim（））；
}
});
$（文档）。单击（函数（）{
$（currentEle）.html（$（“.thVal”）.val（）.trim（））；
});
}
}
var div=document.getElementsByClassName（'div'）；
$（“td”）。悬停(
函数（）{
$（this.append（$（“Delete”）.attr（'id'，'melement'）；
函数转储（）{
$（this.parent（）.html（“”.removeClass（“div”）；
}
$（“#合并按钮”）。在（“单击”，转储）；
}，函数（）{
$（this.find（“button”）.last（）.remove（）；
}
);
$（函数（）{
var trash=document.getElementById（'trash'）；
$（垃圾箱）。可拖放({
drop:函数（事件，ui）{
美元。删除（“div”）；
}
});
});
正文{
字体系列：“Lucida Sans”、“Lucida Sans Regular”、“Lucida Grande”、“Lucida Sans Unicode”、日内瓦、Verdana、无衬线；
}
div{
文本对齐：居中；
边框：1px实心#D3；
宽度：100px；
填充：10px；
光标：移动；
z指数：10；
背景色：#2196F3；
颜色：#fff；
}
.空白{
}
.分区{
文本对齐：居中；
填充：10px；
光标：移动；
背景色：#2196F3；
颜色：#fff；
}
运输署{
边框：1px实心#D3；
填充：10px；
高度：20px；
宽度：200px；
}
.div:悬停{
背景颜色：黄色；
}
.垃圾{
背景色：红色；
高度：100px；
宽度：100px；
}

答复
输入文本：
输入
垃圾桶
使用
ui.draggable[i].remove（）
您可以通过使用for循环获取在该函数中拖动的元素。循环遍历ui.draggable对象，并使用for循环
i
中递增的变量作为键，以选定要拖动的元素为目标

编辑：添加了一个for循环，以循环ui.draggable项，以便在添加多个draggable项时指向正在拖动的元素。此外，我还将更改将ID添加到创建的div的函数，该div保存创建的文本项，以将数字连接到ID，否则在添加多个文本项时，您将具有相同的ID

$（函数（）{
var trash=document.getElementById（'trash'）；
$（垃圾箱）。可拖放({
drop：函数（事件、用户界面）{
for（设i=0；i

在您的问题n中，您正在使用垃圾桶
$（this）
删除事件


函数addElement（）{
var text=document.getElementById（“输入”）.value；
//创建一个新的div元素并给它一个唯一的id
var newDiv=document.createElement（“div”）；
newDiv.id='temp'
//给它一些内容
var newContent=document.createTextNode（文本）；
//将文本节点添加到新创建的div
newDiv.appendChild（newContent）；
//将新创建的元素及其内容添加到DOM中
var currentDiv=document.getElementById（“div1”）；
document.body.insertBefore（newDiv，currentDiv）；
$（函数（）{
var td=document.getElementsByTagName（'td'）；
var div=document.getElementsByTagName（'div'）；
$（div.draggable（）；
$（“#temp”）.draggable（）；
$（td）.可拖放({
drop：函数（事件、用户界面）{
$（本）
.addClass（“div”）
.html（文本）；
$（“div”）.draggable（）；
$（“#temp”）.remove（）；
}
});
});
document.getElementById（“输入”）.value=“”；
$（函数（）{
$（“td”）.dblclick（函数（e）{
e、 停止传播（）；
var currentEle=$（此值）；
var value=$（this.html（）；
updateVal（当前元素，值）；
});
});
函数updateVal（currentEle，value）{
$（currentEle.html（“”）；
$（“.thVal”）.focus（）；
$（“.thVal”）.keyup（函数（事件）{
如果（event.keyCode==13）{
$（currentEle）.html（$（“.thVal”）.val（）.trim（））；
}
});
$（文档）。单击（函数（）{
$（currentEle）.html（$（“.thVal”）.val（）.trim（））；
});
}
}
var div=document.getElementsByClassName（'div'）；
$（“td”）。悬停(
函数（）{
$（this.append（$（“Delete”）.attr（'id'，'melement'）；
函数转储（）{
$（this.parent（））
$(trash).droppable({
  drop: function( event, ui ) { 
       $(event.toElement).remove();
  }
 });`