Javascript 在div之间来回移动和/或拖动元素并捕获它'；s div字符串

我在研究这条线索：，我的问题是，我们如何来回做这件事

这是一个完美的工程，因为它是。我可以前后拖动琴弦

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

将全部移动到父div

将全部移动到子div

但当我试着用按钮移动它时

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

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

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

这就是我目前得到的

我的风格

    <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>

.div拖动{
宽度：350px；
高度：70像素；
填充：10px；
边框：1px实心#AAAAA；
溢出：滚动；
}
#母公司{
高度：100px；
宽度：300px；
背景：绿色；
保证金：0自动；
溢出：滚动；
}
#孩子{
高度：100px；
宽度：300px；
背景：蓝色；
保证金：0自动；
溢出：滚动；
}

我的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>

因此，如果我理解正确，您希望将所有元素移动到子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));   
    }
}

函数父函数（）{
对于（var i=1；我很抱歉回复太晚。是的，这很有效，谢谢！我使用echo标记的唯一原因是因为我将从服务器获取数据，所以我会这样模拟。：）啊，我明白了！很高兴我能帮上忙：）
    <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>

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