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

Question

На пользовательском интерфейсе Dragables ( http://jqueryui.com/demos/droppable/) возможно ли вернуть div, если он находится внутри одного div, а если не внутри другого? например вот так

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

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

Answer 1

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

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

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

Чтобы отменить операцию перетаскивания из обработчика перетаскивания, можно сделать обходной путь, установив для перетаскиваемого элемента значение revert:true, что вынуждает его вернуться, даже если он был сброшен на принимающую каплю. Чтобы убедиться, что вы можете снова перетащить этот маленький прямоугольник, при событии остановки остановки вы должны сбросить 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);
    }
});