Javascript 像1000个dropables…但这是一种干净的方式，鼓励那些新加入jQuery的人正确缓存他们的dom查找。奇怪的是，我开始使用$（this）而不是drop.eq（I），它将类应用于所有的Dropbox，所以我留下了它，它一定是最初的代码格式…现在将其更

---

像1000个dropables…但这是一种干净的方式，鼓励那些新加入jQuery的人正确缓存他们的dom查找。奇怪的是，我开始使用

$（this）

而不是

drop.eq（I）

，它将类应用于所有的Dropbox，所以我留下了它，它一定是最初的代码格式…现在将其更改回原来的格式。但我看不出有什么理由缓存它。这几乎正是我在回答中建议的实现……只需要添加一些限制。此外，更改元素的类可能比直接通过javascript应用样式慢（取决于元素的数量和选择器的复杂性）。p、 学生：你知道你可以做

drop.eq（i）

对吗？如果有很多投掷目标，速度可能会快得多。@David:是的，我忘了

.eq（I）

。我测试了它，当我用10个下降目标测试它时，它稍微快一点，谢谢！哦，它看起来也更干净：）尽可能使用

$（这个）

（并缓存它）而不是

drop.eq（i）

。我怀疑会有任何明显的加速，除非你有1000个dropable…但这是一种干净的方式，鼓励那些新加入jQuery的人正确缓存dom查找。奇怪的是，我开始使用

$（this）

而不是

drop.eq（I）

，它将类应用于所有的dropbox，所以我留下了它，它一定是最初的代码格式…现在将其更改回原来的格式。但我看不出有什么理由缓存它。

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

$(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);
});

$(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", "");   
         }
     });
});

.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; }

<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>

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

});