Come fare un drag and drop su una lista dinamica all'interno di un div con scroll?

Question

grazie per il vostro tempo.

Sto sviluppando un'applicazione mobile con PhoneGap. Ho una visione che ha alcuni record e quei record devono essere riorganizzati facendo un drag and drop. Il numero di questo record potrebbe variata da 2 a 12, e sono all'interno di un contenitore che implementa una pergamena dalle proprietà native di css, come questo:

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

Ora, la cosa è. Ho provato a farlo, ma sembra esserci una sorta di conflitto di eventi. Quando tocchi o fai un evento "finger down", l'evento che dura è lo scroll del contenitore interno, invece di essere in grado di trascinare e rilasciare gli elementi interni di quella vista.

ho tryied un'opzione alternativa che non è accettabile, come si vedrà in questo screenshot:

Qui ho fatto un rotolo fino all'ultimo elemento della lista.

Come si vedrà, ho bisogno di mantenere sia il libro e fare un drag and drop.

Avete qualche idea di come posso risolvere questo?

Ho provato a utilizzare plug-in, HTML nativo per il drag and drop e finora non ha funzionato per me.

Grazie ancora.

Answer 1

Non sono sicuro di aver capito completamente il problema. Ma, ecco il mio prendere su una soluzione:

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. Attendere fino a quando l'utente fa clic su un elemento
2. Se tengono la stessa posizione per una piccola quantità di tempo (< .5s), si passa da modalità "scrolling" a "trascinamento"; se si muovono troppo, possiamo supporre che vogliono scorrere, quindi non abilitiamo il trascinamento.
3. Una volta in modalità "trascinamento", disabilitiamo lo scorrimento modificando l'overflow CSS su nascosto
4. Attendi che l'utente rilasci il dito/il mouse prima di tornare alla modalità "scorrimento".

Here is a JSFiddle with a complete demo. Se fai rapidamente clic e trascina il mouse, non accadrà nulla (se eri su un dispositivo mobile, dovrebbe scorrere). Tuttavia, se fai clic e tieni premuto per 0,5 secondi, lo scorrimento sarà disabilitato e l'elemento trascinabile diventerà rosso. Una volta rilasciato il mouse, dovrebbe resettare.

Presumo che si desideri anche poter scorrere mentre durante il trascinamento. Per fare ciò, dovresti fare lo scroll automatico con JavaScript. Se trascinano l'oggetto abbastanza in alto/in basso sullo schermo, inizieranno automaticamente a scorrere verso l'alto o verso il basso, rispettivamente.

Answer 2

Use this.

Trascinare libreria per un bidimensionale lista ridimensionabile e reattivo di elementi.

affronta Quasi sicuramente il problema riscontrato, e permetterà per le caratteristiche & espandibilità che sarà sicuramente utile, come si continua lo sviluppo :)

Answer 3

avrei usato un TapHold (noto anche come "premere a lungo") evento per attivare le "liste ordinabili". L'utente non sarà in grado di ordinare l'elenco degli articoli a meno che non preme per alcuni secondi sulla lista. In quel momento, sarà in grado di ordinare gli oggetti della lista.

È possibile utilizzare qualsiasi jQuery UI Sortable o qualsiasi altro plug-in "ordinabile".

Se non si desidera utilizzare il TapHold, è possibile utilizzare il seguente codice:

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; 
     }); 
    });