jQuery UI结合可排序和可拖动 [英] Jquery UI combine sortable and draggable

问题描述

我正在尝试将可拖动面板(在顶部)和可排序面板(在底部)组合在一起.

I'm trying to combine a draggable panel (on top), and a sortable panel (bottom).

拖动工作正常，但排序失败.

Dragging works fine, but sorting fails.

这是我的JS小提琴: http://jsfiddle.net/dmUKY/9/

Here is my JS fiddle: http://jsfiddle.net/dmUKY/9/

拖放和可排序函数都共享droppable:drop函数. 对元素进行排序时，该函数必须替换选定的对象.

Both drag'n drop and sortable functions shares the droppable:drop function. When sorting elements, the function has to replace the selected object.

 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?

推荐答案

将代码更改为此应该可以解决问题:

Change your code to this should do the trick:

obj.removeClass('draggable').addClass('editable').removeAttr('style');
//obj.addClass('droppable');
$(this).append(obj);

检查小提琴: http://jsfiddle.net/dmUKY/11/

这篇关于jQuery UI结合可排序和可拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！