jQuery UI draggable à largable plus petit

Question

J'utilise cette 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 baissera pas sur le largable, mais sur la partie supérieure gauche du largable.

_{(source: yart.com.au )}

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. Il ne peut pas être encore parfait, mais nous allons voir si nous pouvons aborder un changement à la fois. Ce que j'espère observer est qu'il tombe à peu près comme il se doit.