Sulla griglia tenere il widget sotto il mouse durante il trascinamento

Question

In realtà uso la griglia per trascinare alcuni oggetti.

Il mio contenitore è più grande della mia finestra, quindi, come al solito, ho una barra di scorrimento sul lato destro. Ora, se voglio trascinare un oggetto dall'alto verso il basso, devo cliccarci sopra e far scorrere il mouse allo stesso tempo.

Come si può vedere su this violino, Se si prende l'oggetto e si inizia a scorrere, l'oggetto rimane nella sua prima posizione, è necessario spostare il mouse per portarlo ad esso.

C'è un modo per mantenere l'elemento sotto il mouse anche se si scorre?

Codice HTML di esempio:

<div class="container"> 
    <div class="gridster"> 
    <ul> 
     <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0</li> 
     <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li> 
     <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li> 
     <li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li> 
     <li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li> 
     <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li> 
     <li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li> 
     <li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li> 
     <li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li> 
     <li data-row="1" data-col="5" data-sizex="1" data-sizey="3">9</li> 
    </ul> 
    </div> 
</div> 

Esempio codice CSS:

.container{ 
    height:1600px; 
} 

Esempio codice jQuery:

var gridster; 

    $(function(){ 
    gridster = $(".gridster ul").gridster({ 
     widget_base_dimensions: [100, 55], 
     widget_margins: [5, 5], 
    }).data('gridster'); 
    }); 

Answer 1

Immagino definito come un algoritmo, vogliamo che l'oggetto trascinabile, quando scorriamo, per stare dove si trova il mouse. Quindi avremmo bisogno di un evento onScroll da qualche parte.

Normalmente, dovremmo semplicemente aggiornare la posizione dell'oggetto con la posizione del mouse, ma suScroll non sembra avere le informazioni sulla posizione del mouse collegate ad esso. Possiamo ridefinirlo, potremmo dire che vogliamo spostare/compensare l'oggetto di n. importo pari all'importo che scorrono. Potrebbe funzionare.

Naturalmente è necessario un po 'di rotazione attorno alla griglia per capire come compensare l'oggetto. Ma penso che qualcosa di simile potrebbe funzionare:

var gridster = $(".gridster ul").gridster({ 
    widget_base_dimensions: [100, 55], 
    widget_margins: [5, 5], 
    draggable: { 
    start: function (e, ui, $widget) { 
     var that = this , //to access gridster from inside onscroll 
      oldScroll = $(document).scrollTop() //to calculate scroll change 
      obj = $(this.helper ? this.$helper : this.$player) //draggable/helper 

     $(document).on("scroll", function() { 
     //calculate scroll change 
     var curr = $(document).scrollTop() 
     var diff = curr-oldScroll 
     oldScroll = curr 
     //add change to stored offset for gridster 
     that.drag_api.el_init_offset.top += diff 

     //show change temporarily because gridster doesn't update 
     obj.css({ 
     　　'top': parseFloat(obj.css("top")) + diff 
     }); 

     }) 
    }, 
    stop: function (e, ui, $widget) { 
    　　$(document).off("scroll") 
    } 
    } 
}).data('gridster'); 

Example

Credo che questo sarà un buon punto di partenza. Avvertenze attuali, la griglia stessa non si aggiorna fino a quando un altro si muove sopra. Potrebbe aver bisogno di più di spillare.

---

Aggiornamento

Le interruzioni del codice di cui sopra sulla resistenza di scorrimento come gridster ha la propria implementazione di scorrimento. Guardando il problema non sono riuscito a trovare un modo per distinguere tra scorrimento a scorrimento e scorrimento normale (guardato a onMouseWheel e DOMMouseScroll ma non sembrava fosse ben supportato. Suppongo quindi che una soluzione rapida sarebbe quella di disattivare la compensazione su scroll se . vicino al bordo in modo da aggiungere questi:

//change stored offset for gridster if not on edge 
if(!that.edge) that.drag_api.el_init_offset.top += diff 

e abbiamo bisogno di controllare la resistenza Così aggiungiamo un gestore trascinare per gridster Qualcosa di simile:..

drag:function(e,ui,$widget){ 
    //check if edge 
    var pixelFromEdge=100 
    this.edge= e.clientY< pixelFromEdge || 
    $("html")[0].clientHeight-e.clientY < pixelFromEdge 
    }, 

Demo

Onestamente fe c'è probabilmente una soluzione migliore e più elegante (a parte la modifica effettiva del plugin.che probabilmente sarebbe molto più semplice)