У меня есть случай, когда я динамически создаю "divs" и делаю их перетаскиваемыми как "класс", содержащийся в "таблице". Мне нужно, чтобы перетащить, чтобы можно было свободно входить в любую из доступных доступных областей. Что происходит, когда я перетаскиваю элемент, он оставляет пробел из области перетаскивания и при удалении; он падает несколько раз вместо того, на котором я его помещаю.
<html>
<head>
<script>
$(function() {
$('.bills').draggable({
containment:"document"
});
$('.drop').droppable({
hoverClass: "ui-state-hover",
tolerance: "pointer",
greedy: true,
drop:function(event, ui) {
ui.draggable.detach().appendTo($('.drop'));
}
});
});
</script>
</head>
<body>
<table>
<tr>
<td>Classroom 1</td>
<td><div class="drop"></div>
<td><div class="people">Johnny</div>
<div class="people">Larry</div>
<div class="people">Donald</div>
</td></tr></table>
<table>
<tr>
<td>Classroom 2</td>
<td><div class="drop"></div>
<td><div class="people">Vince</div>
<div class="people">Gerald</div>
<div class="people">Kenny</div>
</td></tr></table>
<table>
<tr>
<td>Classroom 1</td>
<td><div class="drop"></div>
<td><div class="people">Becky</div>
<div class="people">Sabrina</div>
<div class="people">Justin</div>
</td></tr></table>
</body>
</html>
Застрял на этом и, просматривая через stackoverflow для аналогичной ситуации в течение двух дней, любая помощь была бы весьма признательна.
Если вы .drop
элементы в .drop
это будет иметь такое же поведение, как если бы вы хотели, чтобы все элементы были draggable
, он будет сброшен во все div
с drop
класса. Вы хотите попасть в поле, в которое вы сейчас находитесь, поэтому вы используете this
селектор при вызове события:
$('.drop').droppable({
hoverClass: "ui-state-hover",
tolerance: "pointer",
greedy: true,
drop:function(event, ui) {
ui.draggable.detach().appendTo($(this)); //line changed
}
});
JSFIDDLE: http://jsfiddle.net/jkHS4/1/не обращайте внимания на CSS, так как вы не поместили его здесь, я сделал его минимальным, чтобы показать, что он работает