表格行可以拖动吗? [英] Can table rows be made draggable?

问题描述

我有两个div浮动的:左:

I have two divs that are 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>

并且我希望能够将发明人拖到发明上.

and I want to be able to drag the inventor over to the invention.

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

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

我能够使用列表元素来完成此工作，但是现在我向发明表添加了说明，我想在左侧使用一个表来进行样式设计.

I was able to get this working with list elements, but now that I'm adding an explanation to the invention table, I'd like to use a table on the left-hand side for styling purposes.

推荐答案

这可以解决问题.更改:

This may do the trick. Changes:

• 将tr元素包装在tbody
中
• 拖动tr时添加了辅助克隆.只有这样我才能使拖动实际起作用. (告诉我，如果您不希望这样做(您希望在开始拖动时将tr从表中删除)，我们将看看是否可以找到解决方案)

• Wrapped the tr elements inside tbody
• Added a helper clone when dragging a tr. Only way I could make the dragging actually work. (Tell me if you don't want this (you want the tr to be removed from the table when you start dragging) and we'll see if we can find a solution)

javascript.当拖动开始时，将创建一个克隆(由于helper: "clone")，并且c变量将引用该克隆和被拖动的tr.当拖动停止时，如果它在可放置对象之外，则副本将被破坏.如果它在可拖动对象之内，我们将销毁克隆和tr(因此将其从列表中删除，无法再次拖动)

The javascript. When the dragging starts, a clone is made (because of helper: "clone") and the c variable will holw reference to the clone and the tr being dragged. When the dragging stops, if it is outside a droppable, the clone is destroyed. If it is inside the draggable, we destroy the clone and the tr (so it is removed from the list and can't be dragged again)

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

HTML的唯一新功能是将tr s包裹在tbody标记内.

The only new to the HTML is the wrapping of the trs inside tbody tags.

这是一个演示: http://jsfiddle.net/UBG9n/1/

这篇关于表格行可以拖动吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！