我有一个小的可拖动分区(黑色)和许多旁边有不同ID的节点
当我拖动节点上的黑色元素时,我需要一个悬停效果。我在allowDrop函数中所做的是:
var dragObj;
function drag(ev){
dragObj = ev;
}
function allowDrop(ev){
ev.preventDefault();
var Dragged = dragObj;
var Hovered = ev;
var leftIndent = Dragged.layerX;
var hoveredID = Hovered.target.id.toString().split('_');
var nodesOnLeft = Math.floor(leftIndent/12);
var startingNode = hoveredID[0]-nodesOnLeft;
for (i=1;i<=Math.floor(draggableElementLength/12);i++){
var toApplyCssID = startingNode.toString() + '_1';
var toApplyCss = document.getElementById(toApplyCssID);
$('#'+toApplyCssID).css('background-color','lightgreen');
}
}
基本上我使用layerX属性找出我的鼠标指针和可拖动分区边界之间的距离,并调整它以计算我必须应用新CSS的节点数,并通过查找ID来应用它节点。
这是有效的,但它使得这个过程非常缓慢,因为它涉及许多计算而不是悬停效果,因为当我移除可拖动的部门时它不会消失。
是否有其他方法可以实现此目的,或者我是否需要在现有代码中进行代码更改。
感谢
答案 0 :(得分:0)
如果没有HTML和脚本的其余部分,我只能指出你应该在这种情况下采取的方向:
不要在循环中不断重复计算(不会改变),将它们存储在函数之外:
这可能不是最终的解决方案,但这些是你可以看到的一些东西,以加快你(可能)目前的速度。