jQuery UI可拖动到较小的可放置区域。

Question

jQuery UI可拖动到较小的可放置区域。

jquery-uidrag-and-dropdraggable

4

我正在使用这个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;
}

- Aximili

你能展示一下关于可拖拽和可放置的jquery代码吗？我觉得我知道，但是答案不跳进我的脑海。 - jcolebrand

我添加了代码，谢谢 drachenstern。 - Aximili

抱歉我没有及时回复，我稍后会看一下并尽力帮助你解决问题... -- 你能发一下放大和缩略图的CSS吗？-- 如果在可拖动的UI.helper上保持类别不变会发生什么？它是否会按预期落下（即使它很大）？ - jcolebrand

另一个想法，然后我会继续工作一段时间：您是否尝试打开容差值？例如：tolerance: 'intersect'。 - jcolebrand

谢谢Drachenstern！我已经添加了CSS。抱歉，我不确定你所说的保持ui.helper上的类是什么意思？tolerance intersect已经在可放置元素上了。 - Aximili

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jcolebrand · Accepted Answer

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

尝试用上面的代码块替换原有代码，看看是否接近你想要的效果。它可能还不完美，但让我们一步步来解决问题。我希望能看到它的下降趋势大致符合预期。