Câu hỏi Các hàng của bảng có thể được thực hiện có thể kéo được không?


Tôi có hai divs 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 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ể làm việc này với các phần tử danh sách, nhưng bây giờ tôi đang thêm một lời giải thích cho bảng sáng chế, tôi muốn sử dụng một bảng ở phía bên tay trái cho các mục đích tạo kiểu.


36
2017-08-28 15:19


gốc


Xem thêm stackoverflow.com/questions/307882/… - Andrei


Các câu trả lời:


Điều này có thể làm các trick. Thay đổi:

  • Bọc các tr yếu tố bên trong tbody
  • Đã thêm một bản sao trợ giúp 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. (Hãy cho tôi biết nếu bạn không muốn điều này (bạn muốn các tr được loại bỏ khỏi bảng khi bạn bắt đầu kéo) và chúng tôi sẽ xem nếu chúng ta có thể tìm thấy một giải pháp)

Javascript. Khi kéo bắt đầu, một bản sao được tạo ra (vì helper: "clone") và c biến sẽ holw tham chiếu đế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 nó nằm bên trong draggable, chúng ta sẽ phá hủy bản sao và tr (vì vậy nó sẽ bị xóa khỏi danh sách và không thể bị 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();
    }
});

Chỉ mới cho HTML là gói của trbên trong tbody thẻ.

Đây là bản trình diễn: http://jsfiddle.net/UBG9n/1/


57
2017-08-28 19:05



+1 để sử dụng cụm từ Zounds! - jahroy
Phần nhân bản rất quan trọng, không có hàng bảng sẽ không kéo. - Kai Hartmann
Fiddle tham chiếu không còn hoạt động - MichaelH


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

Không cần tham chiếu đến 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();`

5
2018-04-04 21:22



fiddle tham chiếu không còn hoạt động - MichaelH
@MichaelH jsfiddle mất tham chiếu đến giao diện người dùng jquery, vì vậy bạn chỉ có thể thêm URL code.jquery.com/ui/1.12.1/jquery-ui.min.js tới Tài nguyên bên ngoài - Zoran Majstorovic


Vâng, có thể, một cách là bảng dnd plugin hàng


3
2017-08-28 15:24



Tôi có thể đã bỏ lỡ nó, nhưng plugin đó chỉ làm cho các hàng trong bảng có thể sắp xếp nội bộ trong bảng. (điều này có thể được thực hiện với giao diện người dùng jQuery đơn giản, btw) - Simen Echholt
một ví dụ nhỏ sử dụng plugin được liên kết sẽ cải thiện câu trả lời này. - Andrew