Javascript 当动态添加的div被删除时，最后创建的div将跟随它

我有一个可以创建可拖动div的程序。然后，用户可以将div放入tds中。我正在运行的问题有点混乱，所以我提供了一个示例，希望能够总结出这个问题

示例：

假设你做了三个div，当我拖动第二个div并把它放到一个td上时，以前做的div（在本例中是第一个div）会在被删除的div旁边结束，它的文本也会被更改为刚刚被删除的div

我不太清楚为什么会这样，是不是因为我的div都有相同的Id#temp？如果这太令人困惑，请让我知道

问题图片：

创建3个

div

s。

将第二个

div

拖到

td

并将其放下。

先前生成的

div

紧随其后，其文本将更改为拖放到

td

中的文本。

以下是我的代码的完整版本：

var文本；
var选择文本；
var inputBox=document.getElementById（“输入”）；
函数showInputBox（）{
inputBox.style.display=“block”；
}
函数addElement（）{
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）；
$（函数（）{
$（“div”）。可拖动({
拖动：函数（e）{
selectedText=event.target；
text=$（selectedText.html（）；
}
});
$（“临时”）可拖动({
拖动：函数（e）{
selectedText=event.target；
text=$（selectedText.html（）；
}
});
$（“td”）。可拖放({
drop:函数（事件，ui）{
var selectedDiv=event.target；
$（本）
.addClass（“div”）
.html（文本）；
$（“div”）.draggable（）；
$（“#temp”）.remove（）；
}
});
});
document.getElementById（“输入”）.value=“”；
}
函数addRedElement（）{
text=document.getElementById（“输入”）.value；
//创建一个新的div元素并给它一个唯一的id
var newDiv=document.createElement（“div”）；
newDiv.style.backgroundColor=“红色”；
newDiv.id='temp'
//给它一些内容
var newContent=document.createTextNode（文本）；
//将文本节点添加到新创建的div
newDiv.appendChild（newContent）；
//将新创建的元素及其内容添加到DOM中
var currentDiv=document.getElementById（“div1”）；
document.body.insertBefore（newDiv，currentDiv）；
$（函数（）{
$（“div”）。可拖动({
拖动：函数（e）{
console.log（“正在拖动”）；
selectedText=event.target；
text=$（selectedText.html（）；
console.log（文本）；
}
});
$（“临时”）可拖动({
拖动：函数（e）{
console.log（“正在拖动”）；
selectedText=event.target；
text=$（selectedText.html（）；
console.log（文本）；
}
});
$（“td”）。可拖放({
drop:函数（事件，ui）{
var selectedDiv=event.target；
$（本）
.addClass（“div”）
.html（文本）；
$（“div”）.draggable（）；
$（“#temp”）.remove（）；
}
});
});
document.getElementById（“输入”）.value=“”；
}

正文{
字体系列：“Lucida Sans”、“Lucida Sans Regular”、“Lucida Grande”、“Lucida Sans Unicode”、日内瓦、Verdana、无衬线；
}
div{
文本对齐：居中；
边框：1px实心#D3；
宽度：100px；
填充：10px；
光标：移动；
z指数：10；
背景色：#2196F3；
颜色：#fff；
}
.空白{
}
.第3分部{
位置：绝对位置；
文本对齐：居中；
边框：1px实心#D3；
填充：10px；
光标：移动；
z指数：10；
高度：20px；
背景色：白色；
宽度：20px；
颜色：#fff；
}
.分区{
文本对齐：居中；
填充：10px；
光标：移动；
背景色：#2196F3；
颜色：#fff；
}
运输署{
边框：1px实心#D3；
填充：10px；
高度：20px；
宽度：200px；
}
div:悬停{
背景颜色：黄色；
}

答复
输入文本：
输入文本，它将成为一个可拖动的div。然后您可以将其拖动到一个tds

输入
将输出拖到div：

是不是因为我的部门都有相同的Id#temp

对 你甚至在正确的地方发表了这样的评论

//创建一个新的div元素并给它一个唯一的id

这正是问题所在。

id

必须是唯一的。因为它不是，所以当您以

#temp

为目标时，它总是以页面的第一个为目标

所以你需要有唯一的ID。。。下面，我将

elementCounter

变量设置为零。每次创建

div

时，它都被用作

id

的一部分，然后递增

现在在drag函数中，我使用了

currentlydrable

变量来存储drop函数中要删除的元素的id。请注意，我使用了一个以“temp”开头的div作为目标，并设置了drag函数

这很有效

var文本；
var选择文本；
var inputBox=document.getElementById（“输入”）；
函数showInputBox（）{
inputBox.style.display=“block”；
}
var-elementCounter=0；
函数addElement（）{
text=document.getElementById（“输入”）.value；
//创建一个新的div元素并给它一个唯一的id
var newDiv=document.createElement（“div”）；
newDiv.id='temp'+元素计数器；
元素计数器++
//并给予