Move and/or drag element back and forth from div to div and capture it's div string dynamically

Question

I'm studying this thread : How to move an element into another element?, and https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop, my problem is how do we do this back-and-forth?

This works perfectly as it is. I can drag the strings back and forth.

My goal is for it to look like this.

Move all to parent div

Move all to child div

But when I try to move it using buttons,

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

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

This is the current result.

It just swaps the strings. It's supposed to merge all together, and not swap. Is there a way for this to be fixed?

Move from parent to child

Move from child to parent

How do we move the strings only from one div to another (vise-versa)?

And lastly, how do we capture span values dynamically?

I understand that this works by calling all the values inside <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 );
    });

But my problem is, if I'm going to change the value? It does not capture the latest string being changed.

This is what I got so far.

My Style

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

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

My script.

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

To summarize, what I'm trying to achieve here are the following:

1. Enable transferring all the string from 1 div to another, just append it, and vise versa.
2. Dynamically capture data from "parent" div and "child" div, depending on what the data is being stored, transferred there.
3. Capture the data from "parent" div and convert it into an array so that I can insert it into my database.

Thank you so much in advance.

Answer 1

So if i've understood correctly you wish to move all the elements to either child or parent div, not just swapping the elements.

What you can do is to append the elements. the insertAfter puts the element after the div, just as you did with the drop element. I've Chosen to loop through the id's on the elements that was to be moved by the click event, and then append these to the parent or child DIV element. I have changed the ID's for semantic reason in for coding the loop. This should solve your problem.

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

Also, I see no reason using the php tags and echo for the span elements, works fine without it :)