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

});