Javascript 无法在可拖动拖动事件后设置CSS属性

我们正在开发一个jQuery插件，它可以创建一个包含多个“列”的DIV。当用户滚动DIV时，滚动条将“捕捉”到列边缘。我创建了一个JSFIDLE来演示这一点。向右滚动该框，直到其捕捉到第1列的末尾

问题出在这里。当用户拖动滚动手柄时，我们在拖动代码块的末尾使用以下代码更新列的滚动位置：

$('.'+snapHolder).css('right', snapScrollPos+'px');

当页面最初被加载时，这可以正常工作，但是一旦有了位置属性的任何其他设置，它就会停止工作。例如，重新加载JSFIDLE，然后单击链接“set$（'.snapHolder'）.css（'left'，'-50px'）”。拖动将不再起作用。类似地，如果滚动到第一次捕捉，滚动将不再工作

以下是在列前面的捕捉区域中激发的代码位：

if ( colOffset > (colWidth - snapSize) && colOffset < colWidth ) {
        inAfter = false;
        if (!inBefore) {
            inBefore = true;                
            console.log("before");
            $('.'+snapHolder).css('left', '-' + fullWidth*(colNum+1) + 'px');
            $handle.parents(':eq(2)').find('.'+dragHandle).css({'left': leftPosition});
        }
    }

} else if ( colOffset < snapSize ) {
    inBefore = false;
    if (!inAfter) {
        inAfter = true;
        console.log("after");
        $('.'+snapHolder).css('left', '-' + fullWidth*colNum + 'px');
        $handle.parents(':eq(2)').find('.'+dragHandle).css({'left': leftPosition});
    }
}

if（colOffset>（colWidth-snapSize）和&colOffset

列后：

if ( colOffset > (colWidth - snapSize) && colOffset < colWidth ) {
        inAfter = false;
        if (!inBefore) {
            inBefore = true;                
            console.log("before");
            $('.'+snapHolder).css('left', '-' + fullWidth*(colNum+1) + 'px');
            $handle.parents(':eq(2)').find('.'+dragHandle).css({'left': leftPosition});
        }
    }

} else if ( colOffset < snapSize ) {
    inBefore = false;
    if (!inAfter) {
        inAfter = true;
        console.log("after");
        $('.'+snapHolder).css('left', '-' + fullWidth*colNum + 'px');
        $handle.parents(':eq(2)').find('.'+dragHandle).css({'left': leftPosition});
    }
}

}else if（colOffset

这是我注意到的问题。您正在使用“右”属性设置snapHolder的位置。但是，您可以使用“left”属性作为捕捉位置

设置“left”属性后，“right”属性将被忽略

所以坚持一个。要么使用left，要么使用right

---

不能同时使用两者。

我考虑过这一点，但确实将这一行更改为：$（'..+snapHolder）.css（'left'，snapScrollPos2+'px'）；同样的事情也会发生。事实上，单击底部的$（'.snapHolder'）.css（'left'，'-50px'）链接，您将看到它打破了crolling，并且从未设置过“right”属性。您应该仔细检查您正在做的事情，因为当我将所有“left”更改为“right”时，它会起作用。在您的小提琴中，滚动现在可以工作，但捕捉被破坏。正如我所说，position属性的一个设置似乎打破了它的另一个设置。您只需切换哪个设置起作用。