2

我已经建立了自己的嵌套 ul-tree 菜单。树 li-items 是可排序的，甚至使用 jQuery sortable() 和 droppable() 在多个级别中也是如此。您只需拖放即可。

所以，我现在的问题是，当将一个项目拖到其他项目 droppable() 的区域上时，“sortable() placeholder”和“droppable() hoverClass”都会突出显示。

这是我当前的代码：

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

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

因此，仅突出显示将放置所选项目的位置。

4

4 回答 4

2

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

可排序

$(".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&d 概念之间也有某种整合/交流。

于 2013-10-02T14:45:36.687 回答
1

我现在遇到了这个问题，我制作了这个 gif 来说明：

可排序 + 可放置

当拖到第一个连接的 Sortable 上方（也可能在最后一个下方）时，占位符不会消失真的很烦人，但我认为这是设计使然。如果我在顶部的 Droppable 上释放拖动的项目，它将在视觉上作为 Culture 部分中的第一个项目结束，但通过编程它将设置为 Issue Cover 并恢复到其在 People 部分中的原始位置。

使用 CSS 隐藏占位符，或使用 JS 将其删除，只会创建一个偏移量，甚至无法使用 hack 进行纠正，例如利用 jQUI 的内部结构：$.ui.ddmanager.prepareOffsets($.ui.ddmanager.current, null);

于 2014-06-10T16:21:13.500 回答
0

我不确定我是否完全理解您的要求，但通过使用该属性：tolerance: "fit"您可以为处理跌落的方式设置不同的容差。

JSFiddle

以下是可能的选项列表：

宽容

指定用于测试可拖动对象是否“越过”可放置对象的模式。可能的值：'fit'、'intersect'、'pointer'、'touch'。

fit：可拖动与可放置完全重叠 intersect：可拖动与可放置至少重叠 50% 指针：鼠标指针与可放置重叠 触摸：可拖动与可放置任意重叠

代码示例

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

//getter

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

//setter

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

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

于 2012-08-10T17:53:21.877 回答
0

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

refreshPositions: true

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

于 2017-07-18T11:12:00.577 回答