Jak przeciągnąć i upuścić na liście dynamicznej wewnątrz elementu div z przewijaniem?

Question

dzięki za poświęcony czas.

Zajmuję się tworzeniem aplikacji mobilnej z PhoneGap. Mam widok, który ma kilka rekordów, a te zapisy muszą zostać uporządkowane poprzez przeciąganie i upuszczanie. Liczbę tych zapisów może variate od 2 do 12, a są one wewnątrz kontenera, który implementuje zwój przez rodzimych właściwości CSS, tak:

div#parentDiv { 
    -webkit-overflow-scrolling: touch; 
    overflow:     scroll; 
    width:      100%; 
} 

Teraz chodzi o to. Próbowałem to zrobić, ale wydaje mi się, że są jakieś konflikty. Gdy stukniesz w dół lub wykonasz zdarzenie "palcem w dół", trwającym wydarzeniem jest przewijanie kontenera wewnętrznego, zamiast przeciągania i upuszczania elementów wewnętrznych tego widoku.

I tryied alternatywną opcję, która jest nie do przyjęcia, jak widać na tym screenie:

Tutaj zrobiłem Przewiń w dół do ostatniego elementu listy.

Jak widać, muszę zachować zarówno zwój i zrobić przeciągnij i upuść.

Czy masz pojęcie, jak mogę to rozwiązać?

Próbowałem za pomocą wtyczek, natywnego przeciągania i upuszczania HTML i jak dotąd nic nie działało dla mnie.

Jeszcze raz dziękuję.

Answer 1

Nie jestem pewien, czy całkowicie rozumiem obecny problem. Ale tutaj jest moje zdanie na rozwiązanie:

window.addEventListener("mousedown", function(e1){ 
    timer = setTimeout(startDrag_disableScroll, 500); 
    window.addEventListener("mousemove", function(e2){ 
     //if not dragging, and |e1_location-e2_location| 
     //exceeds a certain threshold, cancel the timer 
     //otherwise, drag the object, if dragging 
    }); 
}); 
window.addEventListener("mouseup", function(e){ 
    //disable dragging 
}); 

function startDrag_disableScroll(e){ 
    //disable scrolling 
    //enable dragging 
} 

1. Odczekać, aż użytkownik kliknie na elemencie
2. Jeśli posiadają one taką samą pozycję małej ilości czasu (< .5s), możemy przełączyć się z tryb "przewijania" do "przeciągania"; jeśli poruszają się zbyt wiele, możemy założyć, że zamiast tego chcą przewinąć, więc nie włączamy przeciągania.
3. Po przejściu w tryb "przeciągania" wyłączamy przewijanie, zmieniając przelew CSS na ukryty
4. Zaczekaj, aż użytkownik zwolni palec/mysz przed powrotem do trybu "przewijania".

Here is a JSFiddle with a complete demo. Jeśli szybko naciśniesz i przeciągniesz mysz, nic się nie wydarzy (jeśli byłeś na urządzeniu mobilnym, powinno się przewijać). Jeśli jednak klikniesz i przytrzymasz przez 0,5 sekundy, przewijanie zostanie wyłączone, a element przeciągalny zmieni kolor na czerwony. Po zwolnieniu myszy należy ją zresetować.

Zakładam, że chcesz także móc przewinąć , podczas gdy przeciąganie przeciąga. Aby to zrobić, musisz przeprowadzić automatyczne przewijanie za pomocą JavaScript. Jeśli przeciągną obiekt wystarczająco daleko w górę/w dół ekranu, zacznie on automatycznie przewijać odpowiednio w górę lub w dół.

Answer 2

Use this.

Przeciągnij i upuść biblioteki dla dwuwymiarowej resizable i czułe listy elementów.

Prawie zdecydowanie rozwiązuje problem, który mają, i pozwoli na funkcje & rozbudowy, które na pewno będą przydatne, jak kontynuować rozwój :)

Answer 3

chciałbym użyć TapHold (znany również jako „długie naciśnięcie”) zdarzenie uruchamiające "listy sortowalne". Użytkownik nie będzie mógł posortować listy artykułów, dopóki nie naciśnie go przez kilka sekund na liście. W tym momencie będzie mógł zamówić elementy listy.

Możesz użyć dowolnego jQuery UI Sortable lub dowolnej innej "sortowalnej" wtyczki.

Jeśli nie chcesz korzystać z TapHold, można użyć następującego kodu:

var pressTimer; 
$(function(){ 
     // By default, disable the sortable list 

     $("#sortable").mouseup(function(){ 
      // Disable the sortable list 

      clearTimeout(pressTimer); 
      // Clear timeout 
      return false; 
     }).mousedown(function(){ 
      // Set timeout 
      pressTimer = window.setTimeout(function() { 
       // Enable the sortable list 

      },1000); 
      return false; 
     }); 
    });