change background color with change in mouse position

Question

I was wondering if it is possible to set background-color with help of mouse coordinates.

What i have is:

I have a DIV-A which is draggable and some other divs which are droppable.

What i need is :

I need to highlight other divs on my page which are droppable, whenever my DIV-A passes over them. What i have is mouse coordinates, is it possible to apply css on the bases of mouse coordinates using jquery.

Answer 1

You can use .hover() for this, so when the mouse is over the div, change it's background colour:

$("yourdiv").hover(function () {
    $(this).css("background-color", "#ff0000");
  },
  function () {
    $(this).css("background-color", "#ffffff");
});

Answer 2

Declare selector and selector2 to whatever you want...

$(selector).mousemove(function(event) {

   // Set some bounds, these are arbitrary here not sure what sort of area your looking for...
   var lowerXBound= 0,
       upperXBound = 100,
       lowerYBound = 0,
       upperYBound = 100,
       currentX = event.pageX,
       currentY = event.pageY;

   var color = currentX > lowerXBound && currentX < upperXBound && currentY > lowerYBound && currentY < upperYBound ? 'red' : 'green';

   $(selector2).css('background-color', color);
});

Answer 3

Something like the following may work. You will probably need to deal with window's scrollLeft and scrollTop to get it perfect. You will probably want to throttle and memoize (if the drop positions don't change) it too.

Also, some more performance can be tweaked out of it by caching offset(), only binding mousemove when needed, and by tweaking the each loop to utilize an optimized loop (e.g. for(var i=droppables.length;i>-1;){var self = droppables.eq(--i);...}).

Also note that this will only change the color of the divs when the MOUSE passes over them...not necessarily when the draggable passes over them...this makes things a little more complicate but the function below should send you in the right direction.

$(document).mousemove(function(e){
     // this should be throttled...
     var x = e.pageX,
         y = e.pageY;
     // this loop could be optimized...
     $("div.droppables").each(function(){
         // these vars could be memoized...
         var self = $(this),
             divL = self.offset().left,
             divT = self.offset().top,
             divR = self.width() + divL,
             divB = self.height() + divT;
         // if the MOUSE coords are between the droppable's coords
         // change the background color
         if(x >= divL && x <= divR && y >= divT && y <= divB){
              self.css("background", "red");
         }
         else{
              // reset the background color
              self.css("background", "");   
         }
     });
});

Answer 4

Have a look at the "Visual feedback" sample over at jQuery UI, and as gmcalab mentioned, not having IDs is not an issue if you just use a class as the selector. Sorry if I'm not reading this correctly.

Answer 5

I posted a demo for you here. Basically this cycles through each droppable position, so if you have a lot of them, it could really slow down mouse movement.

Oh, and I added two variables you can adjust if you want to increase the proximity to the droppable. Adjust the xmargin and ymargin variables as desired.

CSS

.draggable { width: 90px; height: 90px; padding: 0.5em; position: relative; top: 0; left: 0; z-index: 2; }
.droppable { width: 120px; height: 120px; padding: 0.5em; position: absolute; z-index: 1; }
#drop1 { top: 150px; left: 300px; }
#drop2 { top: 400px; left: 100px; }

HTML

<div class="draggable ui-widget-content">
  <p>Drag me to my target</p>
</div>

<div id="drop1" class="droppable ui-widget-header">
  <p>Drop here</p>
</div>

<div id="drop2" class="droppable ui-widget-header">
  <p>Drop here</p>
</div>

Script

$(function(){
 var xmargin = 10,
  ymargin = 10,
  drag = $('.draggable'),
  drop = $('.droppable'),
  dgw = drag.outerWidth() + xmargin,
  dgh = drag.outerHeight() + ymargin,
  pos = [];

 drop
  .droppable({
   //hoverClass: 'ui-state-active',
   drop: function(event, ui) {
    $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
   }
  })
  // set up droppable coordinates array (left, top, right, bottom) for each element
  .each(function(i){
    var dropzone = drop.eq(i);
    var l = dropzone.position().left,
     t = dropzone.position().top,
     r = l + dropzone.outerWidth() + xmargin,
     b = t + dropzone.outerHeight() + ymargin;
   pos.push([l,t,r,b]);
  });

 drag
  .draggable()
  // bind to drag event, or this could be placed inside the draggable function
  .bind( "drag", function(event,ui){
   var l = ui.offset.left,
       t = ui.offset.top;
   // cycle through each droppable and compare current postion to droppable array
   drop.each(function(i){
    if ( ( l + dgw ) > pos[i][0] && l < pos[i][2] && ( t + dgh ) > pos[i][1] && t < pos[i][3] ) {
     $(this).addClass('ui-state-active');
    } else {
     $(this).removeClass('ui-state-active');
    }
   });
  });

});