jQuery UI draggable à petit largable

Question

J'utilise ce http://jqueryui.com/demos/droppable/

Mais j'ai un problème faisant glisser vers un largable qui est plus petit que le draggable.
Il ne tombera pas sur le droppable, mais en haut à gauche du droppable.

alt text http://yart.com.au/junk/draggableProblem.jpg

Y at-il moyen de contourner cela?

Voici le code, merci.

$('.draggable').draggable({ 
    revert: 'invalid', 
    revertDuration: 500, 
    appendTo: 'body', 

    helper: function(event, ui) { 
     return $(this).clone().appendTo('body').css('zIndex', 5).show(); 
    }, 
    drag: function(event, ui) { 
     $(ui.helper).removeClass("enlarge"); 
     $(ui.helper).addClass("thumbnail"); 
     $(this).hide(); 
    }, 
    stop: function(event, ui) { 
     $(this).show(); 
     //$(this).addClass("enlarge"); 
     if ($(this).parent().hasClass("imageContainer")) { 
     $(this).addClass("thumbnail"); 
     } 
     else { 
     $(this).addClass("enlarge"); 
     } 
    }, 
    //cursorAt: { top: 30, left: 40 }, 
    delay: 100, 
    refreshPositions: true 
    }); 


    $('.imageContainer').droppable({ 
    accept: '.draggable', 
    drop: function(event, ui) { 
     ui.draggable.css({ 
     "position": "relative", 
     "left": "0px", 
     "top": "0px" 
     }); 
     if ($(this).children().length == 0) { 
     // ui.draggable.addClass("thumbnail"); 
     $(ui.draggable).appendTo(this); 
     $(this).removeClass("border"); 
     } 
    }, 
    over: function(event, ui) { 
     ui.draggable.removeClass("enlarge"); 
     ui.draggable.addClass("thumbnail"); 
     $(this).addClass("border"); 
    }, 
    out: function(event, ui) { 
     // ui.draggable.removeClass("zoomIn") 
     $(this).removeClass("border"); 
    }, 

    tolerance: 'intersect' 
    }); 

CSS:

.thumbnail { 
    height:60px; 
    margin-right:10px; 
    width:80px; 
    z-index:1; 
} 
.enlarge { 
    border:5px solid white; 
    height:145px; 
    width:195px; 
} 

Answer 1

$('.draggable').draggable({ 
    revert: 'invalid', 
    revertDuration: 500, 
    appendTo: 'body', 

    helper: function(event, ui) { 
     return $(this).clone().appendTo('body').css('zIndex', 5).show(); 
    }, 
    drag: function(event, ui) { 
    /* $(ui.helper).removeClass("enlarge"); 
     $(ui.helper).addClass("thumbnail"); */ 
     $(this).hide(); 
    }, 
    stop: function(event, ui) { 
     $(this).show(); 
     //$(this).addClass("enlarge"); 
     if ($(this).parent().hasClass("imageContainer")) { 
     $(this).addClass("thumbnail"); 
     } 
     else { 
     $(this).addClass("enlarge"); 
     } 
    }, 
    //cursorAt: { top: 30, left: 40 }, 
    delay: 100, 
    refreshPositions: true 
    }); 

Essayez de remplacer votre code avec ce bloc ci-dessus et voir si elle se rapproche de ce que vous voulez. Ce n'est peut-être pas encore parfait, mais voyons si nous pouvons aborder un changement à la fois. Ce que j'espère observer, c'est qu'il tombe à peu près comme il le devrait.