jquery - 如何在可拖动的垂直元素上映射 5 个不同的区域？

Question

我have这段代码:

HTML

<div class="draggable_container">
    <div id="draggable_1" class="draggable">&nbsp;</div>
</div>

CSS

.draggable_container
{
    height:400px;
    background-color:Black;
    width:140px;
}

.draggable
{
    height:60px;
    width:140px;
    cursor:pointer;
    background-color:Red;
}

jQuery

$("#draggable_1").draggable({ axis: "y", containment: 'parent' });

嗯，容器的高度是 400px。 我想做的是将这个区域“拆分”为 5 个不同的区域(因此，每 80 像素有一个区域)，当可拖动元素进入该区域时，将颜色更改为可拖动元素。

示例:当我将可拖动对象移动到底部时，对于 20px，它什么都不做。在 20px 之后，它必须改变颜色(比如蓝色)。现在它在 80px 之后仍然是蓝色的。然后它又变色了……等等……!如果我将可拖动元素移动到顶部也是如此:它必须每 80 像素改变颜色!

希望我的意图很明确。 我该怎么做？

Answer 1

您可以使用 draggable 的 drag 事件来跟踪位置并使用一些数学来确定区域。下面是一个例子。你可以看到它在工作 here .

var colors = [ "#f00", "#0f0", "#00f", "#0ff", "#ff0" ];

$("#draggable_1").draggable({
    axis: "y",
    containment: 'parent',
    drag: function(event, ui) {
        $(ui.helper.context).css('background-color', colors[Math.floor(ui.position.top / 80)]);
    }
});