Question

我有以下代码，允许我将div拖动到3个框中我试图让可拖动的div从你放到它上面的盒子中装入盒子，因为此刻它会掉落它但它允许它被放在窗口的任何地方我怎么能阻止它发生呢？ / p>

 <div id="drop1" class="dropzone">Accepts the element if fits inside</div>
 <div id="drop2" class="dropzone">Accepts the element if intersects</div>
 <div id="drop3" class="dropzone">Accepts the element if pointer hovers</div>
 <div id="drag" class="dropaccept">Drag me</div>
 <script type="text/javascript">
  $(document).ready(
function()
{
    $('#drag').Draggable();
    $('#drop1').Droppable(
        {
            accept :        'dropaccept', 
            activeclass:    'dropactive', 
            hoverclass:     'drophover',
            tolerance:      'intersect'
        }
    );
    $('#drop2').Droppable(
        {
            accept :        'dropaccept', 
            activeclass:    'dropactive', 
            hoverclass:     'drophover',
            tolerance:      'intersect'
        }
    );
    $('#drop3').Droppable(
        {
            accept :        'dropaccept', 
            activeclass:    'dropactive', 
            hoverclass:     'drophover',
            tolerance:      'intersect'
        }
    );
}
 );
</script>

Answer 1

你拥有的不应正常工作，它应该是.draggable()和.droppable()（小写）。对于另一部分，请指定revert option，如下所示：

$('#drag').draggable({ revert: 'invalid' });

此外accept是一个选择器，因此请将其更改为.dropaccept，如下所示：

$('#drop1').droppable(
    {
        accept :        '.dropaccept', 
        activeClass:    'dropactive', 
        hoverClass:     'drophover',
        tolerance:      'intersect'
    }
);

请注意其他属性的大小写更改，JavaScript 区分大小写！

You can test it out here

如何将div拖入框中

1 个答案: