Question

这个让我感到难过，我到处寻找但是我找不到适合我情况的答案，所以就这样了。

我有很多可拖动的桌子，可以复制而不移动
我有很多可以投入使用的DIV。

将表拖放到DIV中工作正常，我遇到的问题是如果用户决定将另一个表拖到同一个DIV中我希望它替换已经存在于该DIV中的任何内容，不幸的是此刻表只是附加到已经存在的表格中。

我之前有一些代码实际上在Chrome中工作正常但最终我在Firefox和Firefox中尝试了它只是不停地抛出错误信息，然后Chrome更新到最新版本并且它也开始抛出相同的错误消息，似乎Chrome决定效仿某些安全协议或修复错误。我相信我收到错误＆＃39; TypeError变量未定义＆＃39;但是我现在已经搞乱了代码并且不再出现该错误，但是如果1已经存在，表仍然被附加到上一个表。

我只是想清除那里可能存在的任何东西的DIV，然后放弃那里的东西。

以下是Javascript代码：

function drop(ev) {
ev.preventDefault();
var armin = ev.toElement;
if($( armin ).find('table').length > 0) {

    var elem = armin.parentNode.parentNode.parentNode.parentNode;
    $( armin ).parent().parent().parent().parent().empty();
    var data = ev.dataTransfer.getData("text/html");
    elem.appendChild(document.getElementById(data).cloneNode(true));
}
else {
    $( ev.toElement ).empty();
    var data = ev.dataTransfer.getData("text/html");
    ev.target.appendChild(document.getElementById(data).cloneNode(true));
}
}

我知道代码有点混乱，可能是因为它是我尝试过的新代码和以前工作过的旧代码的混合物，如果＆＃39; if＆＃39;声明不会触发，无论我做什么，所以我需要帮助。

这是一些HTML：

可拖动表

<div  class="week col-lg-1" >
    <table id="1" class="table table-bordered" style="background-color:#000000; color:white;" 
draggable="true" ondragstart="drag(event)">
        <tr><td data-shift="1" style="background-color:#000000;">7am to 3pm</td></tr>
        <tr><td data-shift="1" style="background-color:#000000;">7am to 3pm</td></tr>
        <tr><td data-shift="1" style="background-color:#000000;">7am to 3pm</td></tr>
        <tr><td data-shift="1" style="background-color:#000000;">7am to 3pm</td></tr>
        <tr><td data-shift="1" style="background-color:#000000;">7am to 3pm</td></tr>
        <tr><td data-shift="5" style="background-color:#000000;">X</td></tr>
        <tr><td data-shift="5" style="background-color:#000000;">X</td></tr>
        <tr>
    </table>
</div>

Droppable DIV

<div class="col-lg-1">
    <div class="title">
        User One
    </div>
    <div  class="schedule" ondrop="drop(event)" ondragover="allowDrop(event)" ondblclick="innerHTML = '';">

    </div>
</div>

Answer 1

在致电appendChild之前，请致电empty以清除现有元素的子女。

elem.empty().appendChild(document.getElementById(data).cloneNode(true));

这将删除所有现有元素，以便您的新元素将成为唯一的子元素。

Answer 2

我通过添加一个清除div的双击事件（innerHTML（＆＃34;＆＃34;））解决了这个问题，它可以满足我的需求，对于使用它的人来说只是一些额外的工作

利用阻力和在放置新内容之前删除但无法替换DIV中的元素

2 个答案: