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

我必须遵守这一守则：

HTML jQuery 嗯，容器的高度是400px。 我想做的是将这个区域“分割”成5个不同的区域（因此，每80px有一个区域），当可拖动元素进入这个区域时，将颜色更改为可拖动项

例如：当我把我的拖拉装置移到底部时，对于20px，它什么也不做。20px之后，它必须改变颜色（比如说蓝色）。现在它在80px之后仍然是蓝色的。然后它又变了颜色。。。等等如果我将draggable元素移到顶部也是一样的：它必须每80px改变一次颜色

希望我的意图很清楚。

---

我该怎么做？

您可以使用DragTable的

拖动事件来跟踪位置，并使用一些数学来确定区域。下面是一个例子。你可以看到它在工作

看起来不错！我想避免$draggable变量。我可以将拖拽：函数传递给trought选择器的引用吗？可以，使用
ui.helper.context
可以访问
#draggable_1
内部的
拖拽
事件函数。我要更新我的答案。
<div class="draggable_container">
    <div id="draggable_1" class="draggable">&nbsp;</div>
</div>

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

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

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

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