Динамически изменить элемент фона (градиент)

Question

Рассмотрим ситуацию http://codepen.io/anon/pen/JdGYBN

мне нужно изменить цвет фона карты «перемещаемой» динамически во время перетаскивания элемента.

Но фон карты должен меняться в соответствии с цветом градиента линии.

background: linear-gradient(to bottom, rgba(255,2,2,1) 0%,rgba(242,255,0,1) 34%,rgba(16,255,0,1) 66%,rgba(255,255,255,1) 100%); 

Не похоже на карту «badone», которая состоит из всех градиентов.

Таким образом, в верхней части карты контейнера фон должен быть в основном красным. Внизу в основном белый.

Любые предложения по реализации этого? Надеюсь вы понимаете меня.

Answer 1

Хитрость заключается в том, чтобы установить background-size перетаскиваемого элемента размера контейнера и background-attachment к fixed так:

#draggable { 
    background: /* linear gradient */; 
    background-size: 900px 500px; 
    background-attachment: fixed; 
} 

draggability плагин использует translate во время перетаскивания и только обновления элемента позиции после падения. Это приводит к фону палкой при перетаскивании. jQuery UI Draggable изменяет позиции при перетаскивании, давая желаемый эффект.

Я скорректировал your demo accordingly.

Answer 2

из документации draggabilly сделать использование dragMove случае для определения положения элемента при перемещении и генерировать значение цвета RGB с функцией высоты строки и минимального и максимального цвета я написал example В соответствии с моим пониманием здесь , делая точность цветопередачи, делает цвет перетаскиваемого элемента более точным.

[1]: http://codepen.io/anon/pen/oXbjrE