在将它们移动到目标之前,如何清除.draggable元素的子项上的样式? [英] How can I clear the styles on a .draggable element's children, before moving them to the target?
问题描述
我有一个div,我使用优秀的fcbkcomplete jquery插件对list-items进行一些操作。然而,当我用可拖动和可排序的页面插入它时,我意识到当我移动它时,额外的装饰会被冻结。至少可以说,这使最终结果感觉不完整。我知道我可以在拖动之前拦截mousedown事件,但我不知道要修改哪些元素以保持样式简单。
I have a div in which I do some manipulation of list-items using the excellent fcbkcomplete jquery plugin. However, when i plug this in with my draggable and sortable page, I realized that the extra decorations are frozen when I move it over. This makes the end result feel unpolished, to say the least. I know I can intercept the mousedown event before the drag, but I don't know what elements to modify to keep the style simple.
这是fcbkcomplete 的演示,它类似于facebook的消息撰写功能。在我的jsfiddle中,一旦我准备将div拖到下面的可排序列表中,我想要所有花哨的装饰(关闭图像,分离成蓝色框,开始输入...工具提示,以及最后的空文本框到被一个简单的字符串替换,这样当我点击h1标题时,我仍然可以检索这些值。有人知道怎么做吗?
Here is a demo of fcbkcomplete, it resembles facebook's message compose feature. In my jsfiddle, once I am ready to drag the div to the sortable list below, I want all the fancy decoration (close image, separation into blue boxes, the "Start to type..." tooltip, and the final empty textbox to be replaced by a simple string, such that when I click on the h1 header, I still can retrieve the values. Does anyone know how to do this?
$("#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就在这里。并且这里是问题的截图。
Thanks for looking. JSFiddle is here. And here is a screenshot of the problem.
推荐答案
提出类似的问题,答案也解决了这个问题。不得不使用自定义助手而不是克隆,但一切都很好。至于droppable,
Asked a similar question, and the answer solves this problem as well. Had to use the custom helper instead of clone, but everything worked out fine. As for the 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();
}
});
问题是,我没有使用过!
the problem is, I wasn't using one!
这篇关于在将它们移动到目标之前,如何清除.draggable元素的子项上的样式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!