jQuery UI可拖动到较小的droppable [英] jQuery UI draggable to smaller droppable

问题描述

我正在使用此 http://jqueryui.com/demos/droppable/

但是，我拖曳到可拖动小于draggable的问题上有问题。

它不会放在droppable上，而是在左上角

But I have a problem dragging to a droppable that is smaller than the draggable.
It will not drop on the droppable, but on the top left of the droppable.

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

有没有办法？

这是代码，谢谢。

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

推荐答案

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

尝试用上面的这个块替换你的代码，看看它是否接近你想要的。这可能还不完美，但让我们看看我们是否可以一次处理一个变化。我希望观察到的是它大概就像它一样。

Try replacing your code with this block above and see if it comes close to what you want. It may not be perfect yet, but let's see if we can tackle one change at a time. What I'm hoping to observe is that it drops approximately like it should.

这篇关于jQuery UI可拖动到较小的droppable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！