use sortable script when items printed with ajax

Question

I'm using jquery sortable for my drag&drop section.

I have button that print results with items on the screen. Those items can be drag&drop into many sections.

If i write the sortable script in my main index.php file than the script doesn't works. In order it to work I need to write the script in in my ajax file. But than, every time i print more results (items) i also print the script again and again.

How can i fix it?

Jquery - drag & drop

<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 - print items

$(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

Make a funcion called for example updateDrag and call it both on document ready, both after the ajax call. For example, like the code below:

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

});
});

The important part of the code is the call of updateDrag() on success :

    $.ajax ({

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

});