Próbuję opracować małą stronę o następującej funkcjonalności:

Strona będzie miała dwa divy: jeden z nich #origin, zawierający wiele miniatur, a drugi #drop, gdzie można upuszczać obrazy (tylko 3).musi być możliwe przeciąganie obrazów z # kropli z powrotem do początku.#drop musi być sortowalny, ponieważ kolejność 3 wybranych obrazów ma znaczenie.Po upuszczeniu na #drop, obrazy powinny się wyrównać, tak jakby były oryginalnie wyświetlane od początku.

Nigdy wcześniej nie korzystałem z jQuery, a nawet miałem wcześniej działający prototyp strony, gdzie miałem już przeciąganie i upuszczanie między dwoma kontenerami za pomocą natywnych zdarzeń przeciągania i upuszczania HTML5, ale kiedy dodałem funkcję sortable () jquery do #drop, obrazy nie mogły być już przeciągane z powrotem do #origin, co przerywa moją funkcjonalność.

Zacząłem od początku i chciałem zaimplementować zarówno funkcję przeciągnij i upuść, jak i sortowanie za pomocą jQuery. Przeczytałem prawie cały interfejs API dla wszystkich funkcji, które można przeciągać, usuwać i sortować, ale mam problem z uruchomieniem tego. Nie jestem pewien, czy są to ustawienia, których używam dla każdej funkcji.

Na skrzydle widać, że obrazy stają się przeciągalne i widzę ustawienia, które określam w efekcie (krycie, kursor), ale obrazów nie można upuścić na #drop.

Z tego, co rozumiem, kombinacja tworzenia obrazów przeciąganych, obrazów posiadających klasę „przeciągnij” i sprawiających, że #drop można upuścić za pomocą akceptacji „.draggable”, powinna pozwolić na najbardziej podstawową funkcjonalność, ale nawet to się nie wydaje. brać. Czytałem też, że jeśli zarówno przeciąganie, jak i upuszczanie mają takie samo ustawienie „zasięgu”, powinno również działać, ale tak nie jest.

Oto prosta wersja kodu strony plus jsFiddle:http://jsfiddle.net/39khs/

Kod:

css:

#origin {
  background-color: green;
}
#drop {
  background-color: red;
  min-height: 120px;
}

js:

$("img").draggable({ helper: "clone", opacity: 0.5, cursor: "crosshair", scope: "drop" });
$("#drop").droppable({ accept: ".draggable", scope: "drop"});
$("#drop").sortable();

html:

<div id="wrapper">
    <div id="origin" class="fbox">
        <img src="http://placehold.it/140x100" id="one" title="one" class="draggable" />
        <img src="http://placehold.it/140x100" id="two" title="two" class="draggable" />
        <img src="http://placehold.it/140x100" id="three" title="three" class="draggable" />
    </div>
  <p>test</p>
    <div id="drop" class="fbox">

    </div>
</div>

Każda pomoc jest bardzo mile widziana.