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

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

13 голосов
/ 20 мая 2011

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

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

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

1 Ответ

35 голосов
/ 22 мая 2011

Ваше мышление было правильным, вы должны сделать маленькие коробочки жадными предметами и обработать событие 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);
    }
});
...