jquery ui helperをdroppableにドロップできません

Question

なぜこのコードでは、ヘルパをドロップ可能領域にドロップできませんか？

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

ドロッパーブルにヘルパーをドロップすることは可能ですか？

Answer 1

ヘルパーのクローンを削除することは完全に可能ですが、ヘルパー自体は削除することはできません。ここ

がクローニングヘルパーをドロップ実証jsFiddleだ： 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のに実行された後、ヘルパーが除去されます。それを維持するには、ドラッグ可能な特定のCSSと配置を削除し、要素を複製する必要があります。 jsFiddleでも同様に「ドラッグ可能」要素を削除するためのデモンストレーションがあります（それは私が自分自身のためにそれを追加しましたあなたの質問に特に関連はなかったということ。）私が持っていた

Answer 2

一つの問題だったのに役立ちます

・ホープ許容値オプションがデフォルト値の 'intersect'の場合にドロップ可能な要素にドロップするには大きすぎるドラッグ可能な要素があります。

'intersect'は、その50％がdroppableを超えたときにドロップ可能であることを意味します。それは2倍以上の大きさであれば不可能です。

私のdraggablesは可変な値を持っていたので、幅が変わり、ドロップ可能かどうかも変わりました。私は代わりに 'ポインタ'を使用し、それはマウスがどこにあるのかによって異なります。