Question

我一直在尝试实现一些简单的可拖动/可放置代码（下面的链接）但没有成功。物品拖动，恢复并保持在收容状态。但是，当放入可放置区域时，该项目会发出警报，但它不再可以拖动。

理想情况下，我希望拖放区域之间的项目可拖动。以防用户将其移动到可放置区域然后改变主意。一旦进入可投放区域，我也想允许该项目在那里移动。

我忽略了一些明显的东西吗？我发现搜索的所有内容看起来都非常基本且简单易用。

我一直在寻找和尝试一些事情，但没有运气。

<div class="build_board_text" id="build_board_text">

    <div id="src_landscape_8-5x11">

        <div id="draggable_1" class="draggable_item">
            <br />Text 1.
        </div>
        <div id="draggable_2" class="draggable_item">
            <br />Text 2.
        </div>
    </div><!-- source list -->
    <div id="dst_landscape_8-5x11">&nbsp;</div><!-- destination list -->

</div

$(function() {
    $('div', $('#src_landscape_8-5x11')).draggable({
        revert: 'invalid',
        containment: '#build_board_text'
    });
    $('#dst_landscape_8-5x11').droppable({
        accept: '#src_landscape_8-5x11 > div',
        drop: function() {
            alert('Dropped!');
        }
    });
    $('#src_landscape_8-5x11').droppable({
        accept: '#dst_landscape_8-5x11 div',
        drop: function() {
            alert('Dropped back!');
        }
    });
});

Answer 1

不完全确定原因，但如果您从position:relative移除#dst_landscape_8-5x11，那么它就可以了。

编辑：此外，在第二个上更改您的来源以匹配第一个：

$('#src_landscape_8-5x11').droppable({
        accept: '#src_landscape_8-5x11 div',...

这些项目来自src_...，因此它们始终被认为是其中的一部分。

jQuery draggable / droppable问题

1 个答案: