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

我该如何让这个帮助程序被“添加”到可放置区域？

- Alan Whitelaw

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。

Alan

- Alan Whitelaw

Answer 2

在辅助函数中使用。

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

- Will

---

似乎不起作用。我对辅助函数的理解是它创建要用作辅助器的HTML。如果将该辅助程序放置在可放置区域上，则希望该辅助程序保持可见。感谢您的回答。 - Alan Whitelaw