可排序和可拖放的jQuery不断替换wordpress中的数据

Question

I am trying to do a sort the data which is in a HTML form in to the div. Each time I drag new item, it will replace the previous item instead of sorting it from the top or the bottom. I don't think there is anything to do with wordpress here. Is just that I am developing it in wordpress. What have I done wrong or have I missed? Below are the code.

script

$(function () {
    $("#blocks").droppable({
        drop: function (event, ui) {
            var id = ui.draggable.attr('id');
            layout = $.ajax({type:"GET",url:'wp-content/themes/dynamictheme/templates/' + id + '.html',async:false}).responseText;
            $("#blocks").wrap( layout );

        }
    }).sortable({
        revert: true
    });
    $(".draggable").draggable({
         helper: "clone"
    });
});

html

<div class="sortable" >
    <ul id="blocks" class="ui-sortable empty" ></ul>
</div>
<div id="slideout">
    <div id="slideMenu">
        <ul style="list-style-type: none;">
            <li id="template1" class="draggable">
                <img src="wp-content/themes/dynamictheme/img/template/template1.png"  width="200"/>
            </li>
            <li id="template2" class="draggable">
                <img src="wp-content/themes/dynamictheme/img/template/template2.png"  width="200"/>     
            </li>
        </ul>
    </div>
</div>

template html

<section class="success" id="template1" >
    <div class="container" style="width:auto;">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>About</h2>
                <hr class="star-light">
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4 col-lg-offset-2">
                <p>Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional LESS stylesheets for easy customization.</p>
            </div>
            <div class="col-lg-4">
                <p>Whether you're a student looking to showcase your work, a professional looking to attract clients, or a graphic artist looking to share your projects, this template is the perfect starting point!</p>
            </div>
            <div class="col-lg-8 col-lg-offset-2 text-center">
                <a href="#" class="btn btn-lg btn-outline">
                    <i class="fa fa-download">Download Theme</i> 
                </a>
            </div>
        </div>
    </div>
</section>

Answer 1

you are not dropping the data as a list item, append the layout variable inside a list element to the #blocks ul

$("#blocks").droppable({
    drop: function (event, ui) {
        var id = ui.draggable.attr('id');
        layout = $.ajax({type:"GET",url:'wp-content/themes/dynamictheme/templates/' + id + '.html',async:false}).responseText;
         $("#blocks").append('<li>' + layout + '</li>');

    }

Answer 2

Use two sortable lists instead of draggable and droppable then use this code:

$(function() {
  $("#list2").sortable({
    connectWith:'.connect',
    stop: function (event, ui) {
      var id = ui.item.sortable.attr('id');
      ui.item.html($.ajax({type:"GET",url:'wp-content/themes/dynamictheme/templates/' + id + '.html',async:false}).responseText);
  }
   $("#blocks").sortable({
      connectWith:'.connect'
    });

 });