Jquery 触发可拖放hoverClass时隐藏可排序占位符
我已经建立了自己的嵌套ul树菜单。树li项是可排序的,甚至可以使用jQuery sortable()和droppable()在几个级别进行排序。你只需拖放 所以,我现在的问题是,当将一个项目拖动到其他项目droppable()的区域上时,“sortable()占位符”和“droppable()hoverClass”都会高亮显示 以下是我目前的代码: 问题:触发Dropable()悬停时,如何使可排序占位符不突出显示Jquery 触发可拖放hoverClass时隐藏可排序占位符,jquery,jquery-ui,jquery-ui-sortable,nested-sortable,Jquery,Jquery Ui,Jquery Ui Sortable,Nested Sortable,我已经建立了自己的嵌套ul树菜单。树li项是可排序的,甚至可以使用jQuery sortable()和droppable()在几个级别进行排序。你只需拖放 所以,我现在的问题是,当将一个项目拖动到其他项目droppable()的区域上时,“sortable()占位符”和“droppable()hoverClass”都会高亮显示 以下是我目前的代码: 问题:触发Dropable()悬停时,如何使可排序占位符不突出显示 因此,只会突出显示所选项目的放置位置。我不确定我是否完全理解您的要求,但通过使
因此,只会突出显示所选项目的放置位置。我不确定我是否完全理解您的要求,但通过使用以下属性:
公差:“适合”
可以为如何处理跌落设置不同的公差
以下是可能的选项列表:
容忍度
指定用于测试可拖动是否在可拖放上的模式。可能的值:“拟合”、“相交”、“指针”、“触摸”
适合:可拖动与可拖放完全重叠
相交:可拖动与可拖放重叠至少50%
指针:鼠标指针与可拖放对象重叠
触摸:可拖动与可拖放重叠任意数量
代码示例
使用指定的容差选项初始化可拖放文件。
$(“.selector”).dropable({tolerance:“fit”})代码>
获取或设置初始后的公差选项
//getter
var-tolerance=$(“.selector”).dropable(“选项”、“公差”)代码>
//setter
$(“.selector”).droppable(“选项”、“公差”、“配合”)代码>
更多信息可以在选项下找到。也有同样的问题。我的解决办法是
可恶的
可降落
CSS(更少)
希望这些不同的d&d概念之间也能有某种整合/交流。我现在遇到了这个问题,我制作了这个gif来说明:
当将占位符拖到第一个已连接的排序表上方(可能也拖到最后一个排序表下方)时,占位符不会消失,这确实令人恼火,但我认为这是出于设计。如果我在顶部的可下拉列表中释放拖动的项目,它将在视觉上作为区域性部分中的第一个项目结束,但以编程方式将其设置为发布封面并恢复到其在人员部分中的原始位置
使用CSS隐藏占位符,或者使用JS删除占位符,只会创建一个偏移量,而这个偏移量甚至不会使用黑客来纠正,比如敲入jQUI的内部:$.ui.ddmanager.prepareOffsets($.ui.ddmanager.current,null)代码>解决方案是,将其放入可排序选项列表中:
refreshPositions: true
现在你不必再隐瞒任何事情了 我为我迟疑的英语道歉。我尝试过“宽容”,但不起作用。当我将一个li元素拖动到其他li元素上时,红色占位符-1px-线一直在某处闪烁。我希望在可拖放悬停时删除sortable()的占位符。为自己而努力:。在树上拖动元素时,红色有时同时出现在两个位置。这对用户不友好。我现在明白了。您一次只想看到一个红色的东西,无论是1px条还是高亮显示的元素。我已经稍微改变了一下,让你再向前迈一步。使用over
属性,您可以在将某物拖到可拖放上时调用函数。我所做的只是在拖动某个对象时删除1px条,但在拖动对象时它不会重新出现。您需要使用out
参数执行此操作,并重新启用1px条。这不是你问题的完整解决方案,但我希望它能有所帮助。嗯,我希望会有更好的解决方案。也许,sortable()
和droppable()
能够彼此多聊一会儿。如果hoverClass存在,我可能会影响占位符状态或者类似的情况。真的没有其他人有这个问题吗?我还没有解决这个问题。难道没有人知道怎么做吗(对于这一点,激活/停用事件比结束和退出事件更好,因为即使带有拖动项目的光标处于“退出”状态,也会显示占位符(将移动置于“结束”位置,然后将其移到一边)。
$( container ).droppable({
//...
over: function( event, ui ){
$(this).parent().addClass("hide-placeholder")
},
out: function( event, ui ){
$(this).parent().removeClass("hide-placeholder")
}
})
.hide-placeholder{
.myPlaceholder {
visibility:hidden;/*display:none*/
}
}
refreshPositions: true