jquery - jquery ui ドロップ ヘルパー

Question

jQuery と Jquery UI を使用して、ドラッグおよびドロップ可能な領域があり、ドラッグ可能なアイテムには次のヘルパーがあります

  $(".draggable").draggable({
    revert: 'invalid',
    grid: [ 20,20 ],
    cursorAt: { top: -12, left: -20 },
    helper: function(event) {
      return $('<div class="helper"></div>');
    }
  });

addedヘルパーをドロップ可能エリアに移動するにはどうすればよいですか?

Answer 1

もう少し調査して別の質問をした後、私はこれを解決しました。

ドロップ可能な要素のdropイベントでは、ドラッグ中に表示される実際のヘルパーをドロップできないため、ヘルパーを複製する必要があります。

$("#droppable").droppable({
  drop: function(event, ui) {
    var newDiv = $(ui.helper).clone(false)
      .removeClass('ui-draggable-dragging')
      .css({position:'absolute', left:0, top:ui.offset.top - 12});
    $(this).append(newDiv);
  }
});

Jason Bensonにも感謝します。

アラン

Answer 2

ヘルパー関数の使用

$(this).append('<div>somecontent</div>');