触发droppable hoverClass时隐藏可排序的占位符

Question

我已经构建了自己的嵌套ul-tree菜单。即使在使用jQuery sortable（）和droppable（）的多个级别中，树li项也是可排序的。你只需拖放即可。

所以，我现在的问题是，当将项目拖到其他项目droppable（）的区域时，“sortable（）占位符”和“droppable（）hoverClass”都会突出显示。

以下是我目前的代码：

http://jsfiddle.net/PeterWesterlund/8KDur/89/

问题：当触发droppable（）悬停时，如何让可排序占位符不突出显示？

因此，只会突出显示所选项目的位置。

Answer 1

有完全相同的问题。我的解决方案是

可排序

$(".scrollPane", ui).sortable({
    //...
    placeholder: "ui-state-highlight myPlaceholder"
})

可投放

$( container ).droppable({
    //...
    over: function( event, ui ){
        $(this).parent().addClass("hide-placeholder")
    },
    out: function( event, ui ){
        $(this).parent().removeClass("hide-placeholder")
    }
})

CSS（少）

.hide-placeholder{
    .myPlaceholder {
        visibility:hidden;/*display:none*/
    }
}

希望这些不同的d＆amp; d概念之间也存在某种整合/沟通。

Answer 2

我现在遇到这个问题，我用这个gif来说明：

当拖拽第一个连接的Sortable（可能还低于最后一个）时，占位符不会消失，这真的很烦人，但我认为这是设计的。如果我在顶部的Droppable上释放拖动的项目，它将在视觉上最终作为文化部分中的第一个项目，但是以编程方式将其设置为Issue Cover并恢复到People部分中的原始位置。

使用CSS隐藏占位符或使用JS删除占位符只会创建一个甚至无法使用黑客修正的偏移量，例如点击jQUI的内部结构：$.ui.ddmanager.prepareOffsets($.ui.ddmanager.current, null);

Answer 3

我不确定我完全理解你在问什么，但是通过使用属性：tolerance: "fit"你可以设置不同的容差来处理掉落。

JSFiddle

以下是可能的选项列表：

  

容差

     

指定用于测试draggable是否在“dropable”上方的模式。可能的值：'fit'，'intersect'，'pointer'，'touch'。

     

适合：draggable完全覆盖了droppable   相交：draggable重叠至少50％的droppable   指针：鼠标指针与droppable重叠   touch：draggable重叠任何数量的droppable

     

代码示例

     

使用指定的容差选项初始化droppable。   $( ".selector" ).droppable({ tolerance: "fit" });   在init之后获取或设置容差选项。

//getter

var tolerance = $( ".selector" ).droppable( "option", "tolerance" );

//setter

$( ".selector" ).droppable( "option", "tolerance", "fit" );

可以在选项下找到更多信息here。

Answer 4

解决方案是，将其放入您的可排序选项列表中：

refreshPositions: true

现在你不必再隐藏任何东西了！