如何在可拖动的垂直元素上映射 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 个不同的区域（因此，每 80px 有一个区域），当可拖动元素进入该区域时，将颜色更改为可拖动项。

示例：当我将可拖动对象移动到底部时，对于 20 像素，它什么也不做。 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)]);
    }
});