Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>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 <a href="http://closure-library.googlecode.com/svn-history/r8/trunk/closure/goog/docs/class_goog_Throttle.html" rel="nofollow noreferrer">throttle</a> and <a href="http://closure-library.googlecode.com/svn-history/r8/trunk/closure/goog/docs/closure_goog_memoize_memoize.js.html" rel="nofollow noreferrer">memoize</a> (if the drop positions don't change) it too.</p> <p>Also, some more performance can be tweaked out of it by caching <code>offset()</code>, only binding <code>mousemove</code> when needed, and by tweaking the <code>each</code> loop to utilize an optimized loop (e.g. <code>for(var i=droppables.length;i&gt;-1;){var self = droppables.eq(--i);...}</code>).</p> <p>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.</p> <pre><code>$(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 &gt;= divL &amp;&amp; x &lt;= divR &amp;&amp; y &gt;= divT &amp;&amp; y &lt;= divB){ self.css("background", "red"); } else{ // reset the background color self.css("background", ""); } }); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload