jQuery UI Draggable, przyciąganie do siatki

Mam dwa pojemniki. Kontener miniatur i kontener "strona". Obie są divami. Miniatury można przeciągać między dwoma kontenerami. Powróciłem do ustawionych miniatur "nieprawidłowych", więc wrócą do jednego z dwóch kontenerów, jeśli zostaną opuszczone poza jedną z nich.jQuery UI Draggable, przyciąganie do siatki

Miniatury muszą być przyciągane do siatki 20x20 wewnątrz kontenera "strona". Jest to klient, który klient może umieścić miniaturki w pojemniku "strona" w dowolnym miejscu, ale nadal może je odpowiednio ułożyć.

Problem polega na tym, że opcja "siatki", którą można przeciągnąć, nie działa na to zbyt dobrze. Wygląda na to, że "siatka" jest określana przez lokalizację przeciągania podczas jej przeciągania, zamiast działać tak, jakby strona miała rzeczywistą siatkę, do której można przyciągnąć.

Czy istnieje sposób, aby to naprawić, aby siatka opierała się na kontenerze "strona", a nie na pozycji przeciągania po rozpoczęciu przeciągania?

Źródło

2011-08-03 mellowsoon

Nadal chcę się dowiedzieć, czy znalazłeś rozwiązanie tego problemu. Próbowałem 1 odpowiedź poniżej, ale to nie rozwiązało mojego problemu.Mój problem polega na tym, że każdy element wydaje się posiadać swoją własną siatkę w oparciu o miejsce, w którym został upuszczony. – crush

@crush, udało mi się to osiągnąć przy użyciu niestandardowej funkcji zaokrąglania w zdarzeniu stop pierwszego przeciągania. Gdy pozycja obiektu zostanie zaokrąglona do najbliższych X pikseli, możesz zastosować nowy parametr siatki, który będzie oparty na pozycji początkowej, która jest znana z wielokrotności siatki. – Capsule

@ Capsule to w zasadzie to, co zrobiłem. – crush

Sprawdź zatrzaśnięcie na przykład jQuery UI Site:

http://jqueryui.com/demos/draggable/#snap-to

Można wziąć ich sam przykład i określić zarówno parametr siatki i przyciągania.

Następnie przystawka będzie oparta w lewym górnym rogu wybieraka przyciągania.

$("#draggable5").draggable({ snap: ".ui-widget-header", grid: [ 80, 80 ] });

Przykład w witrynie Jquery pozwoli teraz na przystawkę "80x80" na podstawie dużego kontenera.

W danej sytuacji może być najłatwiej utworzyć div z 100% szerokości i wysokości, a następnie ustawić Prześwit: selektor (za pomocą selektorów CSS) do tego div, a następnie określenie siatki przyciągania do ...

Powodzenia

Źródło

2011-08-05 21:06:06

"Snap będzie oparty na topie lewy róg selektora przyciągania. " - Źle, to robi * nie * działa. Chciałbym, żeby tak było. ** http: //jsfiddle.net/FNhFX/6/** – Yarin

Być może możesz spróbować zaokrąglić pozycję początkową do najbliższych 20 pikseli, używając zdarzenia początkowego w przeciągalnej.

Coś (niesprawdzone ...):

$('#draggable').draggable(
    {snap : grid: [20,20]}, 
    {start : function(event, ui) { 
     var startPosition = $(ui.draggable).position(); 
     $(ui.draggable).css({ 
      'left' : (Math.round(startPosition.left/20)*20)+'px', 
      'top' : (Math.round(startPosition.top/20)*20)+'px'}); 
     } 
    } 
);

staram się osiągnąć to, ale ja klonowania przeciągany element, do innego zbiornika, tak aby jeszcze bardziej trudne ;-) Nadal musicie wymyślić, jak ustawić pozycję pomocnika w zdarzeniu początkowym ...

Oczywiście będzie działać tylko wtedy, gdy pozycja początkowa jest już absolutna (jak w przypadku przeciągania).

Prawdę mówiąc, prawie osiągnąłem to, stosując tę metodę do zdarzenia stop i usuwania właściwości siatki.

Nie dostaniesz żadnego wizualne podczas przesuwania obiektu wokół bo nie ma siatki per se już, ale gdy upuszczenie go, to idzie do własnej siatki:

stop: function(event, ui) { 
    var stopPosition = $(ui.draggable).position(); 
    $(ui.draggable).css({'left' : (Math.round(stopPosition.left/20)*20)+'px', 'top' : (Math.round(stopPosition.top/20)*20)+'px'}); 
}

Oto przykład praca: http://jsfiddle.net/qNaHE/3/

Źródło

2013-10-21 21:14:39 Capsule

jQuery UI Draggable, przyciąganie do siatki

Odpowiedz

Powiązane problemy