2012-08-05 15 views
5

Tengo un div principal, 150 píxeles de ancho por 500 píxeles de altura, con un exceso de auto (o desplazamiento) que está llevando a cabo un montón de imágenes, por lo tanto:extraño compensado en jquery ui arrastrable

<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 He implementado JQuery UI arrastrable para arrastrar las imágenes de este div a otro div y soltarlas.

$('#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%'); 
     } 
    } 
    }); 

Sin embargo, debido al desplazamiento de la div, alguna de las imágenes que están por debajo del borde inferior inicial de #images, cuando se arrastran, son considerablemente lejos del cursor del ratón por cualquier desplazamiento que tenían en el div originales. Todavía se eliminan correctamente cuando el mouse se coloca sobre el div receptor, pero la imagen arrastrada se muestra en un lugar extraño hasta que se cae.

¿Alguien sabe una manera de corregir esto? Supongo que tengo que hacer algo en la devolución de llamada onDrag para establecer la posición del objeto arrastrado para que sea igual a la posición del cursor del mouse, pero no estoy seguro de cuál debería ser la sintaxis.

Respuesta

Cuestiones relacionadas