从 div 到 div 来回移动和/或拖动元素并动态捕获它的 div 字符串

Question

我正在研究这个线程：How to move an element into another element? 和 https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop，我的问题是我们如何来回执行此操作？

这可以完美地工作。我可以来回拖动琴弦。

我的目标是让它看起来像这样。

全部移动到父 div

全部移动到子 div

但是当我尝试使用按钮移动它时，

<button type="button" onclick="Parent()">
    Move From Parent to Child
</button>

<button type="button" onclick="Child()">
    Move From Child to Parent
</button>

这是当前结果。

它只是交换字符串。它应该合并在一起，而不是交换。有没有办法解决这个问题？

从父级移动到子级

从孩子转移到父母

我们如何只将字符串从一个 div 移动到另一个（反之亦然）？

最后，我们如何动态捕获跨度值？

我知道这可以通过调用 <span> 中的所有值来实现

    $(document).ready(function() {
    var capturevalueschild = $.map($("#child span"), function(elem, index) {
    return $(elem).text();
    }).join("-");
    $("#displayvalueschild").text(capturevalueschild);
    });

    $(document).ready(function() {
    var capturevaluesparent = $.map($("#parent span"), function(elem, index) {
    return $(elem).text();
    }).join("-");
    $("#displayvaluesparent").text(capturevaluesparent );
    });

但我的问题是，如果我要更改值？它不会捕获正在更改的最新字符串。

这是我目前得到的。

我的风格

    <style>
        .div-to-drag {
            width: 350px;
            height: 70px;
            padding: 10px;
            border: 1px solid #aaaaaa;
            overflow: scroll;
        }

        #parent {
            height: 100px;
            width: 300px;
            background: green;
            margin: 0 auto;
            overflow: scroll;
        }

        #child {
            height: 100px;
            width: 300px;
            background: blue;
            margin: 0 auto;
            overflow: scroll;
        }
    </style>

我的 HTML。

    <div id='parent' class='div-to-drag' ondrop='drop(event)' ondragover='allowDrop(event)'>
        <?php echo "<span id='div1parent' draggable='true' ondragstart='drag(event)'>First Parent<br></span>"; ?>
        <?php echo "<span id='div2parent' draggable='true' ondragstart='drag(event)'>Second Parent<br></span>"; ?>
        <?php echo "<span id='div3parent' draggable='true' ondragstart='drag(event)'>Third Parent<br></span>"; ?>
    </div>
    <br>

    <div id='child' class='div-to-drag' ondrop='drop(event)' ondragover='allowDrop(event)'>
        <?php echo "<span id='div1child' draggable='true' ondragstart='drag(event)'>First Child<br></span>"; ?>
        <?php echo "<span id='div2child' draggable='true' ondragstart='drag(event)'>Second Child<br></span>"; ?>
        <?php echo "<span id='div3child' draggable='true' ondragstart='drag(event)'>Third Child<br></span>"; ?>
    </div>

<div id="result"></div>
<br>
<div id="result"></div>

    <br>

    <button type="button" onclick="Parent()">
        Move From Parent to Child
    </button>

    <button type="button" onclick="Child()">
        Move From Child to Parent
    </button>

我的脚本。

    <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));
        }

        function Parent() {
            $("#parent").insertAfter($("#child"));
        }

        function Child() {
            $("#child").insertAfter($("#parent"));
        }

$(document).ready(function() {
    var capturevalueschild = $.map($("#child span"), function(elem, index) {
    return $(elem).text();
    }).join("-");
    $("#displayvalueschild").text(capturevalueschild);
    });

    $(document).ready(function() {
    var capturevaluesparent = $.map($("#parent span"), function(elem, index) {
    return $(elem).text();
    }).join("-");
    $("#displayvaluesparent").text(capturevaluesparent );
    });
    </script>

总而言之，我在这里想要实现的目标如下：

1. 启用将所有字符串从 1 个 div 转移到另一个，只需附加它，反之亦然。
2. 从“父” div 和“子” div 动态捕获数据，具体取决于数据存储和传输到那里的内容。
3. 从“父”div 中捕获数据并将其转换为数组，以便我可以将其插入到我的数据库中。

非常感谢您。

Answer 1

因此，如果我理解正确，您希望将所有元素移动到子 div 或父 div，而不仅仅是交换元素。

你可以做的是追加元素。 insertAfter 将元素放在 div 之后，就像对 drop 元素所做的那样。我已选择循环遍历要由 click 事件移动的元素的 id，然后将它们附加到父或子 DIV 元素。为了对循环进行编码，我出于语义原因更改了 ID。这应该可以解决您的问题。

function Parent() {
for (var i = 1; i <= 3; i++) {
    $("#parent").append($("#parentElement" + i));
    $("#parent").append($("#childElement" + i));
    }
}
function Child() {
for (var i = 1; i <= 3; i++) {
    $('#child').append($("#parentElement" + i));
    $("#child").append($("#childElement" + i));   
    }
}

另外，我认为没有理由对 span 元素使用 php 标签和 echo，没有它也可以正常工作 :)