Có thể tạo các hàng trong bảng có thể kéo được không?

Question

Tôi có hai divs được float: left:

<div id="inventor"> 
<table> 
<tr id="1"><td>Alexander Graham Bell</td></tr> 
<tr id="2"><td>Thomas Edison</td></tr> 
<tr id="3"><td>Nicholas Tesla</td></tr> 
</table> 
</div> 
<form> 
    <div id="invention"> 
     <table> 
     <tr><td><input name="answer1" />Tesla coil</td><td>Explanation</td></tr> 
     <tr><td><input name="answer2" />Telephone</td><td>Explanation</td></tr> 
     <tr><td><input name="answer3" />Phonograph</td><td>Explanation</td></tr> 
     <tr><td><input name="answer4" />Light bulb</td><td>Explanation</td></tr> 
     </table> 
    </div> 
</form> 

và tôi muốn để có thể kéo người phát minh ra hơn đối với sáng chế.

$("#inventor tr").draggable({ 
    revert: "valid" 
}); 

$("#invention tr").droppable({ 
    drop: function(event, ui) { 
     var inventor = ui.draggable.text(); 
     $(this).find("input").val(inventor); 
    } 
}); 

tôi đã có thể có được điều này làm việc với các yếu tố danh sách, nhưng bây giờ mà tôi thêm một lời giải thích vào bảng phát minh, tôi muốn sử dụng một bảng ở phía bên tay trái cho các mục đích phong cách.

Answer 1

Điều này có thể thực hiện thủ thuật. Thay đổi:

• Wrapped các tr yếu tố bên trong tbody
• Added một bản sao helper khi kéo một tr. Cách duy nhất tôi có thể làm cho việc kéo thực sự hoạt động. (Cho tôi biết nếu bạn không muốn điều này (bạn muốn xóa tr khỏi bảng khi bạn bắt đầu kéo) và chúng tôi sẽ xem chúng tôi có thể tìm giải pháp không)

javascript. Khi quá trình kéo bắt đầu, một bản sao được tạo ra (vì helper: "clone") và biến số c sẽ liên quan đến bản sao và tr đang được kéo. Khi kéo dừng, nếu nó ở bên ngoài một droppable, bản sao bị phá hủy. Nếu đó là bên trong có thể kéo, chúng phá hủy các bản sao và tr (vì vậy nó được loại bỏ khỏi danh sách và không thể kéo lại)

//this will hold reference to the tr we have dragged and its helper 
var c = {}; 

$("#inventor tr").draggable({ 
     helper: "clone", 
     start: function(event, ui) { 
      c.tr = this; 
      c.helper = ui.helper; 
     } 
}); 


$("#invention tr").droppable({ 
    drop: function(event, ui) { 
     var inventor = ui.draggable.text(); 
     $(this).find("input").val(inventor); 

     $(c.tr).remove(); 
     $(c.helper).remove(); 
    } 
}); 

Các chỉ mới cho HTML là gói của tr s bên trong các thẻ tbody.

Dưới đây là một bản demo: http://jsfiddle.net/UBG9n/1/

Answer 2

Có thể, một cách là table row dnd plugin

Answer 3

Một giải pháp đơn giản hơn dựa trên bản demo Simen của: http://jsfiddle.net/UBG9n/927

Không cần để tham khảo cho tr chúng tôi đã kéo, vì jQueryUI cung cấp ui.draggable và ui.helper mà chúng ta có thể sử dụng để làm sạch phần tử đã kéo và trình trợ giúp:

$(ui.draggable).remove(); 
    $(ui.helper).remove();`