Kéo thả đối tượng

• Hiển thị hộp thoại

1. Thư viện sử dụng

Để cuối dòng HTML
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" crossorigin="anonymous"></script>
         (đang thấy sự cố khi để jquery-3.3.1.slim.min.js vào vị post bị lỗi ....)
<script src="https://www.jqueryscript.net/demo/Draggable-Sortable-Plugin-jQuery-Touch-DnD/touch-dnd.js"></script>
* Trên dòng thiết lập ... cho thẻ
<script type="text/javascript">
  $(function() {
      $('#cuatoi').sortable({})         
   })
</script>


2. Cách dùng
Tạo div:
<div class="list" id="cuatoi">
    <div>P 1</div>
    <div>P 2</div>
</div>
Chú ý: các div con của list phải có chiều cao trong css
(thì khi kéo dòng không bị thụt ẩn đi...)

.list div{
 border-style: dashed;
  background-color: transparent;
  width:100px;
  height:40px;
}
Thiết lập lệnh Javascript:
<script type="text/javascript">
  $(function() {  
    $('ten_doi_tuong_cha').draggable()    //nếu là class thì . ,là id thì #, khởi tạo cho đối tượng kéo thả
  })
</script>
Hay cấu hình thêm thuộc tính:
<script type="text/javascript">
  $(function() {  
    $('ten_doi_tuong_cha').draggable(
    {
  accept: '',
  activeClass: 'set class cho đối tượng cha',    // tên class cho đối tượng cha khi đang kéo
  cancel: 'input, textarea, button, select, option', //các đối tượng bỏ qua khi kéo
  connectWith: false,
  disabled: false,
  forcePlaceholderSize: false,
  handle: false,  // tên đối tượng bên trong đối tượng con cần kéo
  initialized: false,
  items: 'li, div',
  placeholder: 'placeholder',
  placeholderTag: null,
  upHandler: null,
  receiveHandler: null
    }
   )
  })
</script>


<script type="text/javascript">
  $(function() {  
    $('ten_doi_tuong_cha').draggable()    //nếu là class thì . ,là id thì #, khởi tạo cho đối tượng kéo thả
  })

$('doi_tuong_cha').sortable()
  .on('sortable:activate', function(e, ui) {
     //Lệnh JS  trước khi kéo thả
  })
  .on('sortable:deactivate', function(e, ui) {
    //Lệnh JS  sau khi kéo thả
  })
   .on('sortable:update', function(e, ui) {   
      //alert('Vua tha xong');      
            })   

   $('.list').sortable()
 

</script>

 
 



Tại web có lưu thư viện tại: <script src="/vendor/jquery/touch-dnd.js" type="text/javascript"></script>

2. Cấu hình
  + đối tượng chỉ định: ...
  + sự kiện: trước khi kéo, và sau khi kéo

Tham khảo: https://www.jqueryscript.net/other/Draggable-Sortable-Plugin-jQuery-Touch-DnD.html