更改可拖动div的悬停背景

时间:2015-10-29 20:34:57

标签: javascript jquery html css

我有一个小的可拖动分区(黑色)和许多旁边有不同ID的节点

enter image description here

当我拖动节点上的黑色元素时,我需要一个悬停效果。我在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来应用它节点。

这是有效的,但它使得这个过程非常缓慢,因为它涉及许多计算而不是悬停效果,因为当我移除可拖动的部门时它不会消失。

是否有其他方法可以实现此目的,或者我是否需要在现有代码中进行代码更改。

感谢

1 个答案:

答案 0 :(得分:0)

如果没有HTML和脚本的其余部分,我只能指出你应该在这种情况下采取的方向:

不要在循环中不断重复计算(不会改变),将它们存储在函数之外:

  • 对每个节点使用document.getElementById(toApplyCssID)并存储 数组中的元素
  • 获取从鼠标位置到所需边缘的距离或 初始拖动/ mousedown和存储时div(leftIndent)的边缘 在变量中
  • 将Math.floor(draggableElementLength / 12)存储在另一个变量中(你 没有说明这起源于何处,但它似乎没有改变 功能......)
  • 将CSS应用于relavent元素(来自元素数组) 使用其他存储的值来选择它们
  • 删除之前应用的CSS

这可能不是最终的解决方案,但这些是你可以看到的一些东西,以加快你(可能)目前的速度。