jQuery UI ordinabile: impossibile trascinare elementi nella parte inferiore di una lista/colonna collegata

Question

Sto riscontrando un problema con jQuery Typesbles. Lo sto utilizzando per sviluppare un dashboard simile a iGoogle creando 3 colonne. Tutti e 3 contengono le immersioni sortable e sono collegati tra loro usando l'opzione connectWith.

Il problema riscontrato è quando si tenta di rilasciare un div in fondo a una colonna ordinabile; semplicemente non vuole accadere. Funziona solo se lo trascino sopra/oltre il div bottom-most che è già nella lista in cui sto trascinando.

C'è un modo per evitarlo? O forse per creare un div fittizio fissato nella parte inferiore di ogni colonna? QUALSIASI aiuto su questo sarebbe molto apprezzato!

Grazie in anticipo.

Answer 1

vecchia questione, ma forse per aiutare gli altri ...

opere Imbottitura ma cambia il trattamento visivo.

Un'altra soluzione è l'uso della "tolleranza" fornita dalla sortable api. Un valore di tolleranza di "puntatore" significa che finché il cursore dell'utente si trova su uno degli altri elementi l'oggetto può sostituire la sua posizione (invece di essere una certa quantità di spazio sull'elemento che è la ragione per cui si hanno problemi senza riempimento) .

Provate ad aggiungere questo all'inizializzazione (nel mio esempio sto ordinando una lista verticalmente).

 $(this.$el).sortable({ 
      axis: 'y', 
      cursor: 'move', 
      containment: 'parent', 
      tolerance: 'pointer' // this is the important bit 
     }); 

Deve essere molto scattante dopo averlo fatto.

Inoltre è possibile vedere il doc jquery su di esso qui:

Answer 2

Le colonne che contengono i div richiedono un fondo di riempimento ragionevolmente grande per estendere l'area trascinabile oltre il div inferiore. Altrimenti, le colonne abbracciano i div strettamente e l'area al di sotto di ogni div inferiore si trova all'esterno della lista ordinabile.