2012-08-05 15 views
5

Ho un div principale, 150px di larghezza e 500px di altezza, con un overflow di auto (o di scorrimento), che è in possesso di un gruppo di immagini, quindi:Strano compensato in jQuery UI trascinabili

<div id="images" style="width: 150px; height: 500px; overflow: scroll;"> 
    <img src="images/swift1.jpg" style="width: 150px; height: 150px;" /> 
    <img src="images/swift2.jpg" style="width: 150px; height: 150px;" /> 
    <img src="images/swift3.jpg" style="width: 150px; height: 150px;" /> 
    <img src="images/swift4.jpg" style="width: 150px; height: 150px;" /> 
    <img src="images/swift5.png" style="width: 150px; height: 150px;" /> 
    <img src="images/swift6.JPG" style="width: 150px; height: 150px;" />   
</div> 

I abbiamo implementato l'interfaccia utente di JQuery trascinabile per trascinare le immagini da questo div in un altro div e rilasciarle.

$('#images img').draggable({ 
    revert:true, 
    proxy:'clone', 
    snap: true, 
    onDrag: function(e, ui) { 
     console.log('test'); 
    } 
}); 
$('.drop_image').droppable({ 
    onDragEnter:function(){ 
     $(this).addClass('over');  
    }, 
    onDragLeave:function(){ 
     $(this).removeClass('over'); 
    }, 
    onDrop:function(e,source){ 
     $(this).removeClass('over'); 
     if ($(source).hasClass('assigned')){ 
      $(this).append(source); 
     } else { 
      var c = $(source).clone().addClass('assigned'); 
      $(this).empty().append(c); 
      c.draggable({ 
      revert:true 
      }); 
     $(this).children('img').css('width', '100%').css('height', '100%'); 
     } 
    } 
    }); 

Tuttavia, a causa della scorrimento sul div, le immagini che sono al di sotto del bordo inferiore iniziale di #images, quando trascinato, sono molto lontano dal cursore del mouse con qualsiasi compensazione che avevano in div originale. Vengono comunque rilasciati correttamente quando il mouse viene posizionato sul div di ricezione, ma l'immagine trascinata viene visualizzata in un luogo strano fino a quando non viene rilasciata.

Qualcuno sa come correggerlo? Presumo che devo fare qualcosa nel callback onDrag per impostare la posizione dell'oggetto trascinato per essere uguale alla posizione del cursore del mouse, ma non sono sicuro di quale dovrebbe essere la sintassi.

risposta

Problemi correlati