Question

我正在尝试使用div创建一个基本的拖放界面，我有所有的div和网格工作，但我似乎无法弄清楚代码是什么，要么让draggables不被放在一个另一个或只允许在有空位的地方放置拖拽。有什么帮助吗？

Answer 1

这是一个拖放教程：http://www.ericbieller.com/2010/06/24/how-to-create-a-simple-drag-and-drop-with-jquery/

如果您需要更具体的答案，则需要提出更具体的问题（使用代码）。

Answer 2

您可以这样做：

为所有droppables元素.cDrop创建一个类，为可拖动元素.cDrags创建另一个类。

使用与此类似的匿名函数调用for drops：

$('.cDrop').each(function(){
    $(this).droppable({
        drop: function(event, ui) {
            if((ui.draggable.isDroppedOverOtherDrag())){
                    $(ui.draggable).draggable('option','revert','valid');
            }else{
                   //You do here whatever you need to do. For expample:         
                    alert('Good Job!!');

            }
        }
    });
});

对drags使用类似于此的匿名函数调用：

$( ".selector" ).draggable({
    start: function(event, ui) {
        $(this).draggable('option','revert','invalid');

    }
});

这样你就可以“说”什么时候必须恢复拖动（这就是说，当它没有放在正确的位置时）。

如果已删除的拖动超过另一个拖动，则isDroppedOverOtherDrag()函数将返回true。否则它将返回false。要实现它，您应该使用ui.draggable对象的当前位置，已经正确删除的其余拖动的位置以及它们的宽度/高度。将一些代码添加到drop函数并巧妙地使用拖动ID将允许你有一个var已经被拖放到特定的drop中。

希望有所帮助

jquery，禁用拖放在另一个draggable之上

2 个答案: