使用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();
  }

});