可排序和Droppable jquery不斷更換wordpress中的數據

我想對div中的HTML表單中的數據進行排序。每次拖動新項目時，它都會替換之前的項目，而不是從頂部或底部對其進行排序。我不認爲這裏有什麼與WordPress的。只是我正在用wordpress開發它。我做錯了什麼或錯過了什麼？以下是代碼。可排序和Droppable jquery不斷更換wordpress中的數據

腳本

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

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>

來源

2014-11-04 Gene Lim

你是不會放棄的數據作爲一個列表項，佈局變量附加一個列表元素的內部#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>'); 

    }

來源

2014-11-04 08:32:13

謝謝你的回覆更新。我已經試過這個代碼了。它會追加到#blocks的內部html的最後一個代碼。我無法在拖拽時進行排序。我也使用connectToSortable：「#blocks」來連接它們，但是沒有結果 – 2014-11-04 08:40:14

是否將#slidemenu ul定義爲可排序？ – 2014-11-04 08:49:44

可排序的部分據說是

，是的，它是可以排序的。這也是我所說的 – 2014-11-04 09:04:14

使用兩名排序列表，而不是拖動和投擲的再使用此代碼：

$(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' 
    }); 

});

來源

2014-11-04 10:28:34

可排序和Droppable jquery不斷更換wordpress中的數據

回答

相關問題