Как я могу отобразить 5 отдельных зон на вертикальном элементе? - PullRequest
Новая
       6

Как я могу отобразить 5 отдельных зон на вертикальном элементе?

0 голосов
/ 28 декабря 2011

I имеет этот код:

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

Ну, высота контейнера составляет 400 пикселей. То, что я хотел бы сделать, это «разделить» эту зону на 5 отдельных областей (таким образом, каждые 80 пикселей есть зона) и, когда перетаскиваемый элемент входит в эту зону, изменить цвет на перетаскиваемый элемент.

Пример: когда я перемещаю свой перетаскиваемый элемент на дно, для 20 пикселей он ничего не делает. После 20px он должен изменить цвет (скажем, синий). Теперь он все еще синий после 80 пикселей. Затем он снова меняет цвет ... и так далее ...! То же самое, если я переместу перетаскиваемый элемент наверх: он должен менять цвет каждые 80 пикселей!

Надеюсь, это ясно, мое намерение. Как я могу это сделать?

1 Ответ

2 голосов
/ 28 декабря 2011

Вы можете использовать событие 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)]);
    }
});
...