使用 ajax 打印项目时使用可排序脚本

Question

我正在为我的 drag&drop 部分使用 jquery 可排序。

我有一个按钮可以在屏幕上打印带有项目的结果。这些项目可以 drag&drop 分成许多部分。

如果我在我的 index.php 主文件中编写可排序脚本，那么该脚本将无法运行。为了让它工作，我需要在我的 ajax 文件中编写脚本。但是，每次我打印更多结果（项目）时，我也会一次又一次地打印脚本。

我该如何解决？

Jquery - 拖放

<script>
        // sortable SCRIPT

        $(document).ready(function() {  
            $( ".dropZone" ).sortable({
                revert: true,
                update: function(event, ui) {

                    var secID = event.target.id;
                    var attacID = ui.item.data('id');
                    var data = $(this).sortable('serialize', {
                      attribute: "data-id"
                    });
                    data = data + '&secID=' + secID;
                }           
            });

            $( ".attrac" ).draggable({
                connectToSortable: ".dropZone",
                helper: "clone",
                revert: "invalid"
            });

        } );

    </script>

HTML

<div id="moreRes-box" class="text-center col-md-12 mt20">
    <button type="submit" class="moreRes-btn" data-startRow="0" data-style="panel">SUBMIT</button>
</div>

<div id="search-res-box">

</div>

AJAX - 打印项目

$(document).on("click", ".moreRes-btn", function(e){    

    $.ajax ({

      type: 'POST',
      url: 'ajax/attractions-control.php',
      data: formData,
      async: false,
      success: function (data) 
      {
        $("#search-res-box").append(data);
      }

    });
});

Answer 1

创建一个名为 updateDrag 的函数，并在 ajax 调用之后在文档就绪时调用它。例如像下面的代码：

function updateDrag(){


        $( ".attrac" ).draggable({
            connectToSortable: ".dropZone",
            helper: "clone",
            revert: "invalid"
        });

}

 $(document).ready(function() {  
        $( ".dropZone" ).sortable({
            revert: true,
            update: function(event, ui) {

                var secID = event.target.id;
                var attacID = ui.item.data('id');
                var data = $(this).sortable('serialize', {
                  attribute: "data-id"
                });
                data = data + '&secID=' + secID;
            }           
        });

      updateDrag();
    } );

 $(document).on("click", ".moreRes-btn", function(e){    

$.ajax ({

  type: 'POST',
  url: 'ajax/attractions-control.php',
  data: formData,
  async: false,
  success: function (data) 
  {
    $("#search-res-box").append(data);
    updateDrag();
  }

});
});

代码的重要部分是updateDrag()在成功时的调用:

    $.ajax ({

  type: 'POST',
  url: 'ajax/attractions-control.php',
  data: formData,
  async: false,
  success: function (data)  {
    $("#search-res-box").append(data);
    updateDrag();
  }

});

使用 ajax 打印项目时使用可排序脚本

use sortable script when items printed with ajax

javascript

jquery

ajax

jquery-ui-sortable