GoldenLine
Zaloguj się
Konrad Karpieszuk

Konrad Karpieszuk WordPress Plugin
Compatibility
Assurance for WPML

Temat: tutorial potrzebny - drag and drop, a potem jeszcze...

witam

Przymierzam sie do takiego zadania i wszelkie podpowiedzi w postaci linkow beda mile widziane.

- cel: umozliwic uzytkownikowi wybranie kilku zdjec, ulozenie ich metoda przeciagnij i opusc w dowolnej kolejnosci i zapisanie na koniec identyfikatorow (numerycznych) zdjec do bazy (z zachowaniem "poprzeciaganej" kolejnosci)

jak to sobie wyobrazam:

sa dwa divy. w gornym divie prezentowane sa wszystkie dostepne miniaturki zdjec. uzytkownik przeciaga te ktore go interesują do dolnego diva. potem przeciaga je tak aby ulozyc w interesujacej go kolejnosci. na koniec klika zapisz, co odczytuje identyfikatory obrazkow (moga byc id, rel... cokolwiek), wczytuje szybko do niewidzialnego inputa name="identyfikatoryObrazkow" (po przecinku lub do "identyfikatoryObrazkow[]" jako tablice) i zapisuje do bazy (ajax nie jest konieczny)

na te chwile wiem jak przesunac element -> http://docs.jquery.com/UI/Draggable

co dalej? jak go umiescic w divie i jak potem odczytac kolejnosc owych elementow w divie? przerabial ktos cos takiego lub zna tutorial do podobnego zadania? moze gotowy plugin?

wszelkie wskazowki mile widziane, bym nie wywazal otwartych drzwi i nie tracil czasu :)
Link do wypowiedziLink
Michał Szwarc

Michał Szwarc Programista, Replaio
Sp. z o. o.

Temat: tutorial potrzebny - drag and drop, a potem jeszcze...

tutaj jest przykład kodu: http://jqueryui.com/demos/droppable/#shopping-cart

z 1 div'a wrzucasz do drugiego i szeregujesz jak chcesz
Link do wypowiedziLink
Konrad Karpieszuk

Konrad Karpieszuk WordPress Plugin
Compatibility
Assurance for WPML

Temat: tutorial potrzebny - drag and drop, a potem jeszcze...

dzieki, wyglada dokladnie jak to, czego potrzebuje :)

jak jednak potem zapisac kolejnosc ulozenia elementow?
Link do wypowiedziLink
Michał Szwarc

Michał Szwarc Programista, Replaio
Sp. z o. o.

Temat: tutorial potrzebny - drag and drop, a potem jeszcze...

zawsze w kazdym z div'ów możesz dodać jeszcze pole hidden 

<input type="hidden" name"pole[]" value="???" />


to wszystko masz w formularzu - zwykły submit i masz wysłane wszystko w kolejności jak to w DOM jest ułożone
Link do wypowiedziLink
Michał Szwarc

Michał Szwarc Programista, Replaio
Sp. z o. o.

Temat: tutorial potrzebny - drag and drop, a potem jeszcze...

hehe - kolejny przykład to jest chyba to czego szukasz + bajery z animacjami:

http://jqueryui.com/demos/droppable/#photo-manager
Link do wypowiedziLink
Stanisław Molitorys

Stanisław Molitorys Programista PHP, Web
Developer

Temat: tutorial potrzebny - drag and drop, a potem jeszcze...

przy każdej zmianie kolejnosci AJAXem wysylasz nową kolejność... jQuery UI sortable ma do tego fajne opcje, wystarczy przejrzec dokumentacje...

np cos w tym stylu:

$(selektor).sortable({
...
update: function(){
var kolejnosc = $(selektor).sortable('serialize');
$.ajax({
url: 'link?'+order;
....
});
}
});

pisze z glowy, to dokladnie jak to ma byc musisz sam poprobowac, ale kiedys cos takiego robilem i dzialalo spoko...
Link do wypowiedziLink

konto usunięte

Temat: tutorial potrzebny - drag and drop, a potem jeszcze...

@Stanisław Molitorys - tyle, że wtedy przy każdej zmianie kolejności na liście idzie request z ajaxem, następuje zapis do bazy danych itp - nie jest to optymalne rozwiązanie. Wg mnie lepiej jest zrobić tak:
Michał Szwarc:
zawsze w kazdym z div'ów możesz dodać jeszcze pole hidden 

<input type="hidden" name"pole[]" value="???"/>


to wszystko masz w formularzu - zwykły submit i masz wysłane wszystko w kolejności jak to w DOM jest ułożone


Wtedy każda zmiana kolejności wiąże się tylko ze zmianą kolejności divów w DOMie, a sam zapis kolejności do bazy danych następuje raz, przy wysłaniu formularza.
Jeżeli uważasz, że nie jest to dobre rozwiązanie, bo np użytkownik może przez przypadek zamknąć kartę i stracić kolejność, to jest na to proste rozwiązanie - zapisywać kolejność elementów (np idki z bazy danych czy co tam trzeba będzie) do ciasteczek za pomocą jquery cookie. Działa, bo ostatnio sam coś takiego zrobiłem przy okazji pisania koszyka:)Michał Majewski edytował(a) ten post dnia 13.05.11 o godzinie 18:00
Link do wypowiedziLink
Konrad Karpieszuk

Konrad Karpieszuk WordPress Plugin
Compatibility
Assurance for WPML

Temat: tutorial potrzebny - drag and drop, a potem jeszcze...

akurat w przypadku do ktorego to potrzebuje AJAX by tylko szkodzil wiec sie nawet nad nim nie zastanawiam :)

dzieki za wskazowki
Link do wypowiedziLink
Stanisław Molitorys

Stanisław Molitorys Programista PHP, Web
Developer

Temat: tutorial potrzebny - drag and drop, a potem jeszcze...

heh, szczerze mowiac niedokladnie przeczytalem tresc pierwszego postu.. Konrad pisze, że ma być przycisk "Zapisz" który wysyla kolejnosc (bez Ajaxa) i w takim wypadku rozwiazanie Michala jest oczywiscie odrobine lepsze :)

moje rozwiazanie jest za to bardziej eleganckie, poniewaz zaklada ze nie ma zadnego przycisku a kolejnosc aktualizuje sie dyamicznie, bezposrednio po jej zmianie... tak czy inaczej oba rozwiazania sa ok, tylko zalezy od tego co kto potrzebuje

sorki za niedopatrzenie, no ale moze moje wskazowki sie tez komus przydadza :)

apropos, z ta optymalizacja to bym az tak nie przesadzal.. strona na pewno nie straci na wydajnosci jak przeslemy te kilka znakow w tle... :PStanisław Molitorys edytował(a) ten post dnia 13.05.11 o godzinie 18:33
Link do wypowiedziLink

konto usunięte

Temat: tutorial potrzebny - drag and drop, a potem jeszcze...

Stanisław Molitorys:
apropos, z ta optymalizacja to bym az tak nie przesadzal.. strona na pewno nie straci na wydajnosci jak przeslemy te kilka znakow w tle... :P


Niby tak, ale parę znaków tu, parę znaków tam i w końcu wychodzi na to, że jednak jakiś tam spadek wydajności jest. Tak czy inaczej, masz rację, wybór rozwiązania zależy od tego co jest akurat potrzebne:)
Link do wypowiedziLink
Konrad Karpieszuk

Konrad Karpieszuk WordPress Plugin
Compatibility
Assurance for WPML

Temat: tutorial potrzebny - drag and drop, a potem jeszcze...

hej, wrócę do tematu. zdecydowalem sie na to rozwwiazanie:

http://jqueryui.com/demos/droppable/#photo-manager

tyle ze to co nazywa sie tam Trash, bedzie miejscem w które zdjecia beda umieszczane, jako wybrane do publikacji na stronie. zapisywanie bedzie tak jak sugerowaliscie na bazie przenoszonego wraz ze zdjeciem ukryte input type='hidden' name='wybrane[]' value='id_zdjecia'

spoko.

problem polega jednak na tym, ze obszar z ktorego wybieramy (w przykladzie: ten po lewej) bedzie wewnatrz formularza (pomiedzy otwierajacym i zamykajacym form, praktycznie cala strona to bedzie jeden form). i teraz jak klikne na 'zapisz' na koncu formularza to mi zapisze nie tylko identyfikatory wybrane ale tez te lewe, niewybrane (bo tez maja input hidden o name='wybrane[]')

jak to obejsc? ma ktos jakis prosty pomysl?

myslalem aby lewe objac dodatkowym formem. tylko ze wtedy ten dodatkowy form bedzie wenatrz juz istniejacego. czy to nic nie popsuje? i czy w ogole pomoze? tzn czy wylaczy elementy tam zawarte z forma nadrzednego?

myslalem tez o tym aby elementy w lewym obszarze mialy name='niewybrane[]', a gdy sie je upusci w prawy obszar, nazwa sie zmieniala na 'wybrane[]'. tylko jak to sie robi?
Link do wypowiedziLink

konto usunięte

Temat: tutorial potrzebny - drag and drop, a potem jeszcze...

myslalem tez o tym aby elementy w lewym obszarze mialy name='niewybrane[]', a gdy sie je upusci w prawy obszar, nazwa sie zmieniala na 'wybrane[]'. tylko jak to sie robi?

a te elementy po lewej muszą mieć swoje hiddeny ?
dla każdego elementu po przeciągnięciu dodawaj hiddena z odpowiednim id.
Po co Ci hiddeny dla wszystkich elementów ?

[edit]

możesz jeszcze według swojego pomysłu zmieniać name hiddenów,
w przykładzie który podałeś masz event drop,
który powinien się wywołać po puszczeniu elementu, tylko musisz sprawdzić czy został puszczony w odpowiednim kontenerze.
Do takich rzeczy zwykle tworze element i hiddena o podobnym id np li#el1 i jego odpowiednik input#inel1. Cezary Haller edytował(a) ten post dnia 29.05.11 o godzinie 11:47
Link do wypowiedziLink
Konrad Karpieszuk

Konrad Karpieszuk WordPress Plugin
Compatibility
Assurance for WPML

Temat: tutorial potrzebny - drag and drop, a potem jeszcze...

Cezary H.:
myslalem tez o tym aby elementy w lewym obszarze mialy name='niewybrane[]', a gdy sie je upusci w prawy obszar, nazwa sie zmieniala na 'wybrane[]'. tylko jak to sie robi?

a te elementy po lewej muszą mieć swoje hiddeny ?
dla każdego elementu po przeciągnięciu dodawaj hiddena z odpowiednim id.
Po co Ci hiddeny dla wszystkich elementów ?

niby tak, ale jak takie cos zrobic?

załóżmy, że po lewej mam:



<div class="element">

 <img src="link/do/obr" rel="12" />

</div>

...


przeciągalne są całe elementy .element. identyfikator obrazka trzymam w rel (jesli inaczej beedzie latwiej, nie ma problemu, moge zmienic)

po opuszczeniu:



<div class="element">

 <img src="link/do/obr" rel="12" />

 <input type="hidden" name="wybrane[]" value="12" />

</div>


jak takie cos zrobic? slabo znam js/jquery. jedynie co wiem:

1. plugin, z którego chce skorzystac obsluguje event drop:


$( ".element" ).droppable({

   drop: function(event, ui) { ... }

});

jak powinna wygladac funkcja? co to jest w przykladzie powyzej 'event' a co to 'ui'?

2. wiem, ze samo dolaczenie inputa mozna zrobic przez append:


$('.element').append('<input type="hidden" name="wybrane[]" value="12" />');


czego nie wiem? jak tą wiedzę poskładać do kupy :) jak append włożyć do funkcji obsługującej zdarzenie drop, jak pobrać rel z img i wstawic do tego appendowanego elementu
Link do wypowiedziLink

konto usunięte

Temat: tutorial potrzebny - drag and drop, a potem jeszcze...



$( ".element" ).droppable({

   drop: function(event, ui) { ... }

});

jak powinna wygladac funkcja? co to jest w przykladzie powyzej 'event' a co to 'ui'?

zrób sobie console.log() dla event i ui


$( ".element" ).droppable({

   drop: function(event, ui) {

    console.log(ui);

    console.log(event);

   

 }

 });


żeby modyfikować albo dodać inputa :


$( ".element" ).droppable({

   drop: function(event, ui) {

   ui.helper.find('input').attr('name', 'wybrane[]') // albo :

   ui.helper.append('<input type="hidden" name="wybrane[]"/>');

 }

 });


ui to jest element który przeciągasz, a event to wydarzenie

do elementu upuszczanego możesz dostać się też przez 


ui.draggable


co jest ładnie opisane w wyjaśnieniu event w linku który podałeś

zapomniałem o pobraniu rela:



$( ".element" ).droppable({

   drop: function(event, ui) {

   ui.draggable.append('<input type="hidden" name="wybrane[]" val="'+   ui.draggable.find('img').attr('rel')+'"/>');

 }

 });
Cezary Haller edytował(a) ten post dnia 29.05.11 o godzinie 12:13
Link do wypowiedziLink
Konrad Karpieszuk

Konrad Karpieszuk WordPress Plugin
Compatibility
Assurance for WPML

Temat: tutorial potrzebny - drag and drop, a potem jeszcze...

Cezary H.:
zapomniałem o pobraniu rela:



$( ".element" ).droppable({

   drop: function(event, ui) {

   ui.draggable.append('<input type="hidden" name="wybrane[]" 	[/quote]> val="'+   ui.draggable.find('img').attr('rel')+'"/>');[quote] }

 });

wow, dzieki :) na dysku mam ebook 'jquery novice to ninja' (sitepoint zrobil kiedys promocje ze byla dostepna za free, moze nadal jest) i chyba wroce do jej czytania :)
Link do wypowiedziLink

konto usunięte

Temat: tutorial potrzebny - drag and drop, a potem jeszcze...

wow, dzieki :) na dysku mam ebook 'jquery novice to ninja' (sitepoint zrobil kiedys promocje ze byla dostepna za free, moze nadal jest) i chyba wroce do jej czytania :)

spoko :)

jeszcze możesz sobie dodac warunek:


if(ui.draggable.find('hidden').length ==0){

tutaj append

}


żebyś nie miał wielu inputów dla jednego elementu.

Co do książki to jakoś żadna mi nie przypadła do gustu,
wolę uczyć się na zadaniach i drobnych tutorialach
Link do wypowiedziLink
Konrad Karpieszuk

Konrad Karpieszuk WordPress Plugin
Compatibility
Assurance for WPML

Temat: tutorial potrzebny - drag and drop, a potem jeszcze...

Cezary H.:
jeszcze możesz sobie dodac warunek:


if(ui.draggable.find('hidden').length ==0){

tutaj append

}


żebyś nie miał wielu inputów dla jednego elementu.

a to by mi akurat przeszkadzalo. w zamysle wybrane do publikacji zdjecia mozna wybrac kilka razy (np publikuj zdjecie nr 12, po nim nr 2, po nim znow 12...) wiec nie ma potrzeby usuwac takich duplikacji
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

jQuery, Microsoft, and Nokia




Wyślij zaproszenie do
Anuluj