可拖曳和排序元素jquery

我遇到了可排序列表的问题。所有列表都有几个可排序的孩子。所有的孩子也应该是可拖动的，这样我可以从一个列表中删除一个孩子到另一个列表。当我同时使用可排序和可拖动时，它们相互覆盖，其中一个被忽略。可拖曳和排序元素jquery

现在我得到了以下jQuery代码。我还创建了一个说明我的问题的jsFiddle。

// Set sortable to categories 
$('.trade-in-template').sortable(); 
$('.trade-in-category-sub').sortable(); 
$('.trade-in-category-sub').children().draggable(); 

$(".trade-in-category").droppable({ 
    drop: function(event, ui) { 
     var dragged = $(ui.draggable); 
     var droppedOn = $(this); 

     if (dragged.hasClass('trade-in-row')) 
     { 
      dragged.css('left', 0); 
      dragged.css('top', 0); 
      droppedOn.find('.trade-in-category-sub').append(dragged); 
     } 
    } 
});

http://jsfiddle.net/a6Ftd/

来源

2013-06-12 hgerdin

它看起来像你重复'排序'功能与手动'draggable'和'droppable'功能。使用'connectWith'将'.trade-in-template''sortable'连接到'.trade-in-category'元素。 –

但是，我应该如何添加功能，以便所有.trade-in-row可以在所有.trade-in-category之间放置并在其中排序？ – hgerdin

现在，一些示例HTML标记应该非常有用。 –

显然，你的问题不是一个JavaScript问题，而是一个CSS问题。我有updated your jsFiddle here。我已经注释过你的draggable和droppable声明，就像我说的那样，它有点多余。我用sortable声明中的connectWith替代了该声明。

但即使如此，它也无法正常工作，因为您的将您的.trade-in-row元素左移。

阻止丢弃的原因是因为在CSS中浮动元素将其从CSS盒模型流（或布局，无论您想要调用它）中移除。结果，父母.trade-in-category-sub元素崩溃为0px高度。在0px的高度，你没有空间让你的排序进入。

为什么它适用于当前可排序而不适用于连接的排序，可能已经是jQuery UI代码领域了，具体到它的实现。如果我错了，有人可能想纠正我。

为了测试这个，我在代码中添加了CSS样式，清楚标记了相关元素的边界。

.trade-in-category-sub { 
    border:1px solid red; 
} 

.trade-in-category-sub div { 
    background:rgba(50,100,255,.5) !important; 
}

而且我还删除您的花车：

.trade-in-row { 
    width: 95%; 
    padding: 10px 0px 10px 5%; 
    border-bottom: 1px solid #CCC; 
    border-left: 1px solid #CCC; 
    /*float:left;*/ /* ### <------------------------------------- */ 
    cursor: -webkit-grab; 
}

只是取消注释，以明白我的意思。 :)

来源

2013-06-12 12:54:45

非常感谢！ :) – hgerdin

我认为你可以使用这里nestedSortable。

注意：虽然它不再被维护，但我们已经使用了它1年，事实证明它工作得很好。配置选项与可排序的和可拖动的非常相似。

来源

2013-06-12 12:09:34 vcarel

可拖曳和排序元素jquery

回答

相关问题