Можно ли перетаскивать строки таблицы?

У меня есть два div, которые являются 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>

и я хочу иметь возможность перетащить изобретателя на изобретение.

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

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

Мне удалось заставить это работать с элементами списка, но теперь, когда я добавляю объяснение в таблицу изобретений, я бы хотел использовать таблицу в левой части для стилизации.

Ответы

Ответ 1

Это может сделать трюк. Изменения:

  • Обернуто элементы tr внутри tbody
  • Добавлен вспомогательный клон при перетаскивании tr. Только способ, которым я мог бы заставить перетаскивание, действительно работает. (Скажите, если вы этого не хотите (вы хотите, чтобы tr был удален из таблицы, когда вы начинаете перетаскивать), и мы увидим, можем ли мы найти решение)

javascript. Когда начинается перетаскивание, выполняется клонирование (из-за helper: "clone"), а переменная c будет ссылаться на клон, а tr - на перетаскивание. Когда перетаскивание останавливается, если оно находится за пределами droppable, клон уничтожается. Если он находится внутри перетаскиваемого объекта, мы уничтожаем клон и tr (поэтому он удаляется из списка и его нельзя перетаскивать снова)

//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 внутри tbody.

Вот демо: http://jsfiddle.net/UBG9n/1/

Ответ 2

Более простое решение, основанное на демонстрации Simen: http://jsfiddle.net/UBG9n/927

Нет необходимости ссылаться на tr, который мы перетащили, поскольку jQueryUI предлагает ui.draggable и ui.helper, которые мы можем использовать для очистки перемещенного элемента и помощника:

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