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

Question

我有这样的代码:

<标题> HTML

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

<标题> CSS h1> jQuery h1> 器的高度是400px。我想做的是"分裂"。这个区域有5个不同的区域(所以，每80px有一个区域)，当可拖拽元素进入这个区域时，改变可拖拽元素的颜色。

示例:当我移动我的拖拽到底部，20px它不做任何事情。在20px之后，它必须改变颜色(比如蓝色)。现在80px之后仍然是蓝色。然后它又变了颜色……等等……!如果我将可拖拽元素移动到顶部，它必须每80px改变一次颜色!

希望这是明确我的意图。我该怎么做呢?

Answer 1

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

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