javascript - 悬停可拖动的 div 时更改背景

Question

我有一个小的可拖动分区(黑色)和它旁边的许多具有不同 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 来应用它。

这是有效的，但它使过程非常缓慢，因为它涉及许多计算，而且它不是悬停效果，因为当我删除可拖动的分区时它不会消失。

是否有任何其他方法可以实现此目的，或者我是否需要对现有代码进行代码更改。

谢谢

Answer 1

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

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

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

这可能不是最终的解决方案，但这些是您可以考虑的一些事情，可以加快您(可能)目前拥有的东西。