Jquery UI 结合了可排序和可拖动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18399543/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery UI combine sortable and draggable
提问by dams
I'm trying to combine a draggable panel (on top), and a sortable panel (bottom).
我正在尝试组合一个可拖动面板（顶部）和一个可排序面板（底部）。
Dragging works fine, but sorting fails.
拖动工作正常，但排序失败。
Here is my JS fiddle: http://jsfiddle.net/dmUKY/9/
这是我的 JS 小提琴：http: //jsfiddle.net/dmUKY/9/
Both drag'n drop and sortable functions shares the droppable:dropfunction.
When sorting elements, the function has to replace the selected object.
拖放和排序功能共享该droppable:drop功能。排序元素时，该函数必须替换所选对象。
drop: function (event, ui) {
//alert($(this).parent().html());
//alert($(ui.helper).attr('class'));
var obj;
if ($(ui.helper).hasClass('draggable')) {
//alert('draggable');
obj = $(ui.helper).clone();
obj.removeClass('draggable').addClass('editable')
//obj.addClass('droppable');
$(this).parent().append(obj);
}
//alert($(this).parent().html());
}
How should I combine these two functionalities?
我应该如何结合这两个功能？
采纳答案by trrrrrrm
Change your code to this should do the trick:
将您的代码更改为此应该可以解决问题：
obj.removeClass('draggable').addClass('editable').removeAttr('style');
//obj.addClass('droppable');
$(this).append(obj);
check on fiddle: http://jsfiddle.net/dmUKY/11/
检查小提琴：http: //jsfiddle.net/dmUKY/11/
回答by Vaibs_Cool
$("#sortable").sortable({
revert: true,
stop: function(event, ui) {
if(!ui.item.data('tag') && !ui.item.data('handle')) {
ui.item.data('tag', true);
ui.item.fadeTo(400, 0.1);
}
}
});
$("#draggable").draggable({
connectToSortable: '#sortable',
helper: 'clone',
revert: 'invalid'
});
$("ul, li").disableSelection();
I guess this is what you were looking for !!
我想这就是你要找的！！
