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

问题描述

我有两个浮动的 div:left:

<表格><tr id="1"><td>亚历山大·格雷厄姆·贝尔</td></tr><tr id="2"><td>托马斯爱迪生</td></tr><tr id="3"><td>尼古拉斯·特斯拉</td></tr>
<表格><div id="发明"><表格><tr><td><input name="answer1"/>特斯拉线圈</td><td>说明</td></tr><tr><td><input name="answer2"/>电话</td><td>说明</td></tr><tr><td><input name="answer3"/>留声机</td><td>说明</td></tr><tr><td><input name="answer4"/>灯泡</td><td>说明</td></tr>

</表单>

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

$("#inventor tr").draggable({回复:有效"});$("#invention tr").droppable({下降:功能(事件，用户界面){varinventor = ui.draggable.text();$(this).find("input").val(inventor);}});

我能够使用列表元素来实现这一点，但是现在我要向发明表添加说明，我想使用左侧的表来进行样式设置.

解决方案

这可能会奏效.变化:

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

JavaScript.当拖动开始时，创建一个克隆(因为 helper: "clone")并且 c 变量将保留对被拖动的克隆和 tr 的引用.当拖动停止时，如果它在一个 droppable 之外，则克隆被销毁.如果它在draggable里面，我们销毁clone和tr(所以它从列表中删除，不能再次拖动)

//这将保存对我们拖动的 tr 及其助手的引用var c = {};$("#inventor tr").draggable({助手:克隆"，开始:功能(事件，用户界面){c.tr = 这个；c.helper = ui.helper;}});$("#invention tr").droppable({下降:功能(事件，用户界面){varinventor = ui.draggable.text();$(this).find("input").val(inventor);$(c.tr).remove();$(c.helper).remove();}});

HTML 唯一的新内容是将 tr 包裹在 tbody 标签内.

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

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:

• 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)

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

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

Here's a demo: http://jsfiddle.net/UBG9n/1/

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