Draggable возвращается, если вне этого div и внутри других draggables (используя как недопустимые, так и действительные варианты возврата)

В ui draggables (http://jqueryui.com/demos/droppable/#revert) можно ли вернуть div, если его внутри div и если не внутри другого? например, это

$( "#draggable" ).draggable({ revert: "valid", revert:"invalid" });

но это не сработает из-за очевидных причин. Могу ли я это утверждать, хотя?.. поскольку, когда его внутри этого droppable, а не внутри этого droppable?

Ответ 1

Ваше мышление было правильным, вы должны сделать маленькие коробки жадными droppables и обработать событие drop на них. Сложная часть - отменить операцию перетаскивания.

По умолчанию ваши draggables должны начинаться как revert:'invalid'. Вам не нужно ничего делать, если они перетаскиваются в большую коробку, которая в моем примере использует tolerance:'fit', поэтому маленькие ящики должны быть полностью внутри, чтобы их можно было принять.

Я сделал маленькие коробки жадными droppables с tolerance:'touch', поэтому, если перетаскиваемая маленькая коробка касается другого маленького поля, она выведет на него обработчик drag.

Чтобы отменить операцию перетаскивания с помощью обработчика перетаскивания, вы можете сделать обходной способ установки перетаскиваемого элемента на revert:true, что заставляет его возвращаться, даже если оно было сброшено на принимающем droppable. Чтобы убедиться, что вы снова можете перетащить эту маленькую ячейку, в событии остановки перетаскивания вам нужно reset revert:'invalid'. Событие stop будет срабатывать при каждом успешном падении и, если оно вернется, оно будет срабатывать после завершения реверсии.

Вы можете попробовать демо-версию здесь: http://jsfiddle.net/htWV3/1/

HTML:

<div class="drop">
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
</div>

CSS

.drop { display:inline-block; width:300px; height:200px; border:1px solid silver; background-color:whitesmoke; padding:10px; }

.drag { display:inline-block; width:30px; height:30px; border:1px solid silver; background-color:white; }

JavaScript:

$('.drop').droppable({
    tolerance: 'fit'
});

$('.drag').draggable({
    revert: 'invalid',
    stop: function(){
        $(this).draggable('option','revert','invalid');
    }
});

$('.drag').droppable({
    greedy: true,
    tolerance: 'touch',
    drop: function(event,ui){
        ui.draggable.draggable('option','revert',true);
    }
});