Przeciągalne odwrócenie jeśli poza tym div I wewnątrz innych przeciągów (używając zarówno opcji nieprawidłowego, jak i poprawnego odwrócenia)

Question

Przeciągalne odwrócenie jeśli poza tym div I wewnątrz innych przeciągów (używając zarówno opcji nieprawidłowego, jak i poprawnego odwrócenia)

On UI draggables ( http://jqueryui.com/demos/droppable/#revert ) czy jest możliwe odwrócenie div, jeśli jest wewnątrz jednego div, a jeśli nie wewnątrz innego? na przykład tak

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

Ale to nie zadziała z oczywistych powodów.. Czy Mogę to przesądzić?.. bo kiedy to jest wewnątrz tego opadającego, a nie wewnątrz tego opadającego?

13

jquery jquery-ui drag-and-drop draggable jquery-ui-draggable

Author: Logan, 2011-05-20

Source

1 answers

score 35 · Accepted Answer

Twoje myślenie było poprawne, musisz zrobić małe pudełka i obsłużyć na nich Zdarzenie drop. Najtrudniejszą częścią jest anulowanie operacji przeciągania.

Domyślnie, Twoje przeciągnięcia powinny zaczynać się od revert:'invalid'. Nie musisz nic robić, jeśli są przeciągane wewnątrz dużego pudełka, które w moim przykładzie używa tolerance:'fit', więc małe pudełka muszą być całkowicie wewnątrz, aby zostać zaakceptowane.

Zrobiłem małe pudełka z tolerance:'touch', więc jeśli dotknie innego małego pudełka, wywoła na nim obsługę drag.

Aby anulować operację przeciągania z funkcji przeciągania, możesz obejść ustawienie przeciąganego elementu na revert:true, co zmusza go do cofnięcia, nawet jeśli został upuszczony na akceptującym upuszczalnym. Aby upewnić się, że możesz przeciągnąć to małe pudełko ponownie, podczas zdarzenia drag stop musisz zresetować revert:'invalid'. Zdarzenie stop zostanie uruchomione przy każdym pomyślnym zrzutie i jeśli zostanie cofnięte, zostanie uruchomione po przywróceniu. zakończone.

Możesz wypróbować demo na żywo tutaj: 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);
    }
});