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

我将jquerysortable用于我的

拖放部分

我有一个按钮，可以在屏幕上打印带有项目的结果。这些项目可以
拖放到多个部分中

如果我在主
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>   

例如，调用一个函数
updateDrag
，并在documentready上调用它，这两个函数都是在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();
  }

});

你能制作一些JSBIN文件让你的代码运行吗？@GiacomoPaita-aint-easy…主页上的拖放脚本为什么不影响通过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();
  }

});
});

    $.ajax ({

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

});