在将.draggable元素的子元素移动到目标之前，如何清除它们的样式？

我有一个div，我使用优秀的fcbkcomplete jquery插件对列表项进行一些操作。 然而，当我用可拖动和可排序的页面插入它时，我意识到当我移动它时，额外的装饰会被冻结。 至少可以说，这使最终结果感觉不完整。 我知道我可以在拖动之前拦截mousedown事件，但我不知道要修改哪些元素以保持样式简单。

这是fcbkcomplete的演示 ，它类似于facebook的消息撰写function。 在我的jsfiddle中，一旦我准备将div拖到下面的可排序列表中，我想要所有花哨的装饰（关闭图像，分离成蓝色框，“开始输入…”工具提示，以及最后的空文本框到被一个简单的字符串取代，这样当我点击h1标题时，我仍然可以检索这些值。有人知道怎么做吗？ 

$("#draggable").draggable({ connectToSortable: "#sortable", helper: "clone", revert: "invalid", distance: 20 }); $('#draggable').each(function () { $(this).mousedown(function () { // Need to clear styles here //$(this).parent().children('.maininput').hide('blind', 500); }); });

谢谢你的期待。 JSFiddle就在这里。 这是问题的截图 。

问一个类似的问题 ，答案也解决了这个问题。 不得不使用自定义助手而不是克隆，但一切都很好。 至于droppable， 

  $("#container").droppable({ accept: '.product', drop: function (event, ui) { var x = ui.helper.clone(); x.removeClass().attr('style', ''); x.addClass("ui-state-default"); x.appendTo('#container'); ui.helper.remove(); } });

问题是，我没有使用一个！

Interesting Posts