У меня есть два 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);
}
});
Мне удалось заставить это работать с элементами списка, но теперь, когда я добавляю объяснение в таблицу изобретений, я бы хотел использовать таблицу в левой части для стилизации.