无法将jquery ui帮助器放在droppable上 [英] 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中，还有一个演示，可以删除draggable元素（而不是与您的问题特别相关，我只是为自己添加它。）

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.)

希望这有助于

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