如何在可拖动的垂直元素上映射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之后的蓝色。然后它再次改变颜色......等等......！如果我将可拖动元素移动到顶部，则相同：它必须每80px更改一次颜色！

希望我的意图很清楚。 我该怎么办？

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)]);
    }
});