Question

我有一个案例，我正在动态创建“div”并使它们全部可拖动为“表”中包含的“类”。我需要做的是让拖拽可以自由地落入可用的许多可放置区域中的任何一个。发生的事情是当我拖动元素时它会从拖动区域留下一个间隙并且当被丢弃时;它会多次丢弃，而不是我放入的那个。

<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类似的情况，我们将非常感谢任何帮助。

Answer 1

如果您将项目附加到.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我把它做到最小化以显示它正常工作

可以从div中删除Draggable并将其放入单个droppable中

1 个答案: