无法在 droppable 上删除 jquery ui 助手 [英] Can't drop jquery ui helper on droppable

问题描述

为什么这段代码不允许我将助手拖放到可拖放区域?

Why will this code not let me drop the helper onto the droppable region?

  $(".product").draggable({
    revert: 'invalid',
    cursorAt: { top: -12, left: -20 },
    helper: function(event) {
      return $('<div class="product_helper"></div>');
    }
  });
  $(".droppable").droppable({
    accept: '.product_helper',
    drop: function(event, ui) {
      $(this).append( ui.helper );
    }
  });

甚至可以将帮助器拖放到可放置对象上吗?

Is it even possible to drop a helper onto a droppable?

推荐答案

完全可以删除助手的克隆，但是助手本身(如您的示例)不能删除.

It's completely possible to drop a clone of the helper however the helper itself (as in your example) cannot be dropped.

这是一个 jsFiddle 演示删除克隆的助手:http://jsfiddle.net/jKabn/1/

Here's a jsFiddle demonstrating dropping a cloned helper: http://jsfiddle.net/jKabn/1/

相关代码如下:

  $(".product").draggable({
    revert: 'invalid',
    cursorAt: { top: -12, left: -20 },
    helper: function(event) {
      return $('<div class="helper">Helper</div>');
    }
  });
  $(".droppable").droppable({
    drop: function(event, ui) {
           //clone and remove positioning from the helper element
           var newDiv = $(ui.helper).clone(false)
               .removeClass('ui-draggable-dragging')
               .css({position:'relative', left:0, top:0});  

           $(this).append(newDiv);
    }
  });

在 jquery 中执行 drop 后，帮助器被删除.要保留它，您需要删除可拖动的特定 css 和定位以及克隆元素.在 jsFiddle 中还有一个用于删除可拖动"元素的演示(并不是说它与您的问题特别相关，我只是为自己添加它.)

The helper is removed after drop is executed in jquery. To keep it you'll need to remove the draggable specific css and positioning as well as clone the element. In the jsFiddle there's also a demonstration for dropping "draggable" element as well (not that it was particularly relevant to your question I was just adding it for myself.)

希望有帮助

这篇关于无法在 droppable 上删除 jquery ui 助手的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！