While in the process of dragging an element, I want to dynamically change its class or any CSS property based on its position. Here is what I have achieved so far:
https://jsfiddle.net/twfegqgc/
The issue I am facing is that the class changes only when the element passes halfway through the window, but it should also change when it reaches the end of the window width.
HTML
<div id="sun" class="yellow"></div>
<div class="position"></div>
<div class="window"></div>
JS
var sun = $("#sun");
sun.draggable();
$("#sun").bind("drag", function(event, ui) {
var halfWidth = $(window).width() / 2;
var left = $(this).offset().left + 100;
var windowWidth = $(window).width() - 200;
$('.position').html(left);
$('.window').html(windowWidth);
if(left > halfWidth) {
sun.removeClass('yellow');
sun.addClass('red')
} else if (left == windowWidth) {
sun.removeClass('red');
sun.addClass('black')
}
});
I am attempting to address another query with my current task.