واجهة مستخدم jQuery قابلة للسحب إلى وحدات أصغر يمكن إسقاطها

Question

أنا أستخدم هذا http://jqueryui.com/demos/droppable/

لكن لدي مشكلة في السحب إلى عنصر قابل للإسقاط أصغر من العنصر القابل للسحب.
لن يسقط على الشيء القابل للإسقاط، بل على الجزء العلوي الأيسر منه.

_{(مصدر: yart.com.au)}

هل هناك أي طريقة للتغلب على هذه؟

هنا هو الكود، شكرا.

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

حاول استبدال الكود الخاص بك بهذه الكتلة أعلاه ومعرفة ما إذا كان يقترب مما تريده.قد لا يكون الأمر مثاليًا بعد، ولكن دعونا نرى ما إذا كان بإمكاننا التعامل مع تغيير واحد في كل مرة.ما آمل أن ألاحظه هو أنه ينخفض ​​تقريبًا كما ينبغي.