JQuery ordinabili (oggetti con varie altezze) in movimento alla prima o ultima posizione è fastidioso

Question

Problema

sto avendo problemi con il mio elenco ordinabile con diversi elementi di diversa altezza. Il problema si verifica quando sto provando a spostare un oggetto più grande nella prima o nell'ultima posizione (che hanno entrambi oggetti più piccoli). Se riesco attualmente dipende molto da dove sull'elemento più grande clicco e inizio a trascinare.

Se si desidera spostare l'elemento nella posizione inferiore più piccola, è necessario fare clic su vicino alla parte inferiore dell'elemento per farlo funzionare, e se si desidera trascinarlo nella posizione superiore, è necessario fare clic in alto. Ma voglio essere in grado di trascinare l'oggetto cliccando ovunque.

Alcune informazioni aggiuntive

Gli elementi non possono essere trascinati fuori del genitore e il genitore è solo grande come deve essere e viene visualizzato un rotolo se è più grande di quello che è il contenitore. Quindi sembra che non posso trascinare l'oggetto più grande oltre il primo oggetto (più piccolo) se non lo trascino nella parte superiore dell'elemento.

Ho cercato di risolvere questo problema utilizzando cursorAt e usando top: 0 e un altro test usando bottom: 0 Ma non sembra fare alcuna differenza (quindi potrei aver frainteso come usarlo). Attualmente sto usando la tolleranza: puntatore.

È possibile aggirare il problema di non riuscire a trascinare l'elemento più grande nell'ultima posizione temporaneamente durante l'ordinamento aumentando l'altezza con l'altezza dell'oggetto trascinato. Ma non sempre funziona e non è una soluzione molto buona. E il problema di non essere in grado di trascinarlo in cima appare ancora?

non posso cambiare il codice JQuery come in jquery-sortable-with-containment-parent-and-different-item-heights

Domanda: Come posso trascinare un oggetto più grande per la posizione superiore o inferiore, consentendo all'utente di fare clic in qualsiasi punto della voce?

Grazie per il vostro aiuto!

Answer 1

Questo potrebbe non risolvere il problema, ma ho pensato di condividere i risultati di alcuni esperimenti che ho fatto oggi. Avevo bisogno di creare una galleria fotografica ordinabile con foto a blocchi in linea di diverse larghezze, e ho scoperto che spostare foto più larghe sarebbe stato davvero difficile perché il segnaposto era più piccolo dell'elemento che stavo muovendo. Ho finito per usare questo:

container.sortable({ 
     placeholder: "photo placeholder", 
     start: function (event, ui) { 
      ui.placeholder.width(ui.item.width()); 
     } 
    }); 

L'usanza classi segnaposto sono lì per garantire il segnaposto non viene nascosta per impostazione predefinita, e l'evento start assicura che il segnaposto è la stessa larghezza dell'elemento che si sta per mossa. Questo ha funzionato molto bene per me, e nel tuo caso, la sostituzione dell'altezza per larghezza potrebbe funzionare.

Ho anche provato a utilizzare containment come hai fatto e ho scoperto che a volte rende le cose molto più difficili a seconda degli articoli nella riga. Come hai spiegato, incluso lo tolerance: "pointer" aiuta ad alleviare i problemi, ma se possibile, rimuovere containment generalmente rende l'interfaccia utente più indulgente.