Draggable удален из div и упал в один

Question

Draggable удален из div и упал в один

0

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

Zowes 21 март 2014, в 17:34

Источник

Теги:

jquery

html

jquery-ui

jquery-ui-droppable

jquery-ui-draggable

1 ответ

Ещё вопросы

G.Mendes · Answer 1 · 2014-03-21T14-20-00.000Z

Если вы .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, так как вы не поместили его здесь, я сделал его минимальным, чтобы показать, что он работает