jQuery - Kéo và thả các phần tử từ danh sách vào các khối riêng biệt

Question

Tôi đang cố gắng để có được một thành phần jQuery tương tự như một trong số này site.

Về cơ bản, có danh sách với các yếu tố có sẵn, bạn có thể kéo và thả vào nhiều khối.

Tôi có khá nhiều JavaScript kinh nghiệm phát triển, nhưng tôi khá mới để jQuery, ngôn ngữ tôi muốn điều này được kịch bản trong.

thể bạn guys xin vui lòng đưa tôi đến với một số ví dụ tương tự như một trong những cho thấy ở trên, hoặc cho tôi một số gợi ý về những gì sẽ là một nơi tốt để bắt đầu tìm kiếm một cái gì đó như thế này?

Answer 1

Có thể jQuery UI thực hiện những gì bạn đang tìm kiếm. Nó bao gồm nhiều chức năng trợ giúp hữu ích như làm cho các đối tượng có thể kéo, có thể tháo rời, có thể thay đổi kích thước, sắp xếp, vv ..

Hãy xem sortable with connected lists.

Answer 2

Kiểm tra điều này: http://wil-linssen.com/entry/extending-the-jquery-sortable-with-ajax-mysql/ Tôi đang sử dụng tính năng này và tôi hài lòng với giải pháp.

Ngay ở đây bạn có thể tìm thấy một bản demo: http://demo.wil-linssen.com/jquery-sortable-ajax/

Thưởng thức!

Answer 3

Ngoài ra kiểm tra nó

jQuery: bố trí tùy chỉnh bằng cách kéo và thả (ví dụ)

http://devheart.org/examples/jquery-customizable-layout-using-drag-and-drop/1-getting-started-with-sortable-lists/

Answer 4

tôi đã viết một số mã kiểm tra để kiểm tra jQueryUI kéo/thả. Ví dụ này cho thấy cách kéo một phần tử từ một vùng chứa và thả nó vào một vùng chứa khác.

Markup-

<div class="row"> 
    <div class="col-xs-3"> 
     <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h1 class="panel-title">Panel 1</h1> 
     </div> 
     <div id="container1" class="panel-body box-container"> 
      <div itemid="itm-1" class="btn btn-default box-item">Item 1</div> 
      <div itemid="itm-2" class="btn btn-default box-item">Item 2</div> 
      <div itemid="itm-3" class="btn btn-default box-item">Item 3</div> 
      <div itemid="itm-4" class="btn btn-default box-item">Item 4</div> 
      <div itemid="itm-5" class="btn btn-default box-item">Item 5</div> 
     </div> 
     </div> 
    </div> 
    <div class="col-xs-3"> 
     <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h1 class="panel-title">Panel 2</h1> 
     </div> 
     <div id="container2" class="panel-body box-container"></div> 
     </div> 
    </div> 
    </div> 

JQuery Codes-

$(document).ready(function() { 

$('.box-item').draggable({ 
    cursor: 'move', 
    helper: "clone" 
}); 

$("#container1").droppable({ 
    drop: function(event, ui) { 
    var itemid = $(event.originalEvent.toElement).attr("itemid"); 
    $('.box-item').each(function() { 
     if ($(this).attr("itemid") === itemid) { 
     $(this).appendTo("#container1"); 
     } 
    }); 
    } 
}); 

$("#container2").droppable({ 
    drop: function(event, ui) { 
    var itemid = $(event.originalEvent.toElement).attr("itemid"); 
    $('.box-item').each(function() { 
     if ($(this).attr("itemid") === itemid) { 
     $(this).appendTo("#container2"); 
     } 
    }); 
    } 
}); 

}); 

CSS-

.box-container { 
    height: 200px; 
} 

.box-item { 
    width: 100%; 
    z-index: 1000 
} 

Kiểm tra plunker JQuery Drag Drop

Answer 5

function dragStart(event) { 
 
      event.dataTransfer.setData("Text", event.target.id); 
 
     } 
 

 
     function allowDrop(event) { 
 
      event.preventDefault(); 
 
     } 
 

 
     function drop(event) { 
 
      $("#maincontainer").append("<br/><table style='border:1px solid black; font-size:20px;'><tr><th>Name</th><th>Country</th><th>Experience</th><th>Technologies</th></tr><tr><td> Bhanu Pratap </td><td> India </td><td> 3 years </td><td> Javascript,Jquery,AngularJS,ASP.NET C#, XML,HTML,CSS,Telerik,XSLT,AJAX,etc...</td></tr></table>"); 
 
     }

.droptarget { 
 
      float: left; 
 
      min-height: 100px; 
 
      min-width: 200px; 
 
      border: 1px solid black; 
 
      margin: 15px; 
 
      padding: 10px; 
 
      border: 1px solid #aaaaaa; 
 
     } 
 

 
     [contentEditable=true]:empty:not(:focus):before { 
 
      content: attr(data-text); 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
 
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"> 
 
     <p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Drag Table</p> 
 
    </div> 
 

 
    <div id="maincontainer" contenteditable=true data-text="Drop here..." class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

1. này chỉ đơn giản ở đây tôi đang phụ thêm bảng html vào một div ở cuối
2. chúng ta có thể đạt được điều này hoặc bất cứ điều gì với một khái niệm đơn giản về cách gọi một hàm JavaScript khi chúng ta muốn (Ở đây trên thả.)
3. Trong ví dụ này bạn có thể kéo & thả bất kỳ số bảng nào, bảng mới sẽ được thêm vào bên dưới bảng cuối cùng tồn tại trong div khôn ngoan khác nó sẽ là bảng đầu tiên trong div.
4. ở đây chúng tôi có thể thêm văn bản giữa các bảng hoặc chúng tôi có thể nói phần mà chúng tôi thả bảng có thể chỉnh sửa, chúng tôi có thể nhập văn bản giữa các bảng.

Thanks ... :)

Answer 6

Kéo một đối tượng và đặt ở một vị trí khác nhau là một phần của tiêu chuẩn HTML5. Tất cả các đối tượng có thể kéo được. Nhưng phải tuân theo Thông số kỹ thuật của trình duyệt web bên dưới. API Chrome Internet Explorer Firefox Safari Opera Version 4,0 9,0 3,5 6,0 12,0

Bạn có thể tìm thấy ví dụ từ bên dưới: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2