可排序和可丢弃Jquery不断替换wordpress中的数据

Sortable and Droppable Jquery keeps on replacing data in wordpress

本文关键字：替换 wordpress 数据 排序 Jquery      更新时间：2023-09-26

我正在尝试将HTML表单中的数据排序到div中。每次拖动新项目时，它都会替换上一个项目，而不是从顶部或底部排序。我不认为这与wordpress有任何关系。只是我正在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>

如果没有将数据作为列表项删除，请将列表元素中的布局变量附加到#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>');
    }

使用两个可排序列表，而不是可拖动和可丢弃列表，然后使用以下代码：

$(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'
    });
 });
相关文章：