Question

我想知道是否可以借助鼠标坐标设置背景颜色。

我拥有的是：

我有一个可拖动的DIV-A和一些可以放置的其他div。

我需要的是：

我需要在我的DIV-A通过它们时突出显示我的页面上可以删除的其他div。我所拥有的是鼠标坐标，是否可以使用jquery在鼠标坐标的基础上应用css。

Answer 1

以下内容可能有效。您可能需要处理窗口的scrollLeft和scrollTop以使其完美。您可能希望throttle和memoize（如果放置位置没有改变）。

此外，可以通过缓存offset()，仅在需要时绑定mousemove以及通过调整each循环来使用优化循环（例如{ {1}}）。

另请注意，当MOUSE经过它们时，这只会改变div的颜色...不一定当draggable经过它们时...这会让事情变得更复杂但是下面的函数会让你进入正确的方向。

for(var i=droppables.length;i>-1;){var self = droppables.eq(--i);...}

Answer 2

我在这里为你发了一个demo。基本上这会循环通过每个可放置的位置，所以如果你有很多它们，它可能真的会减慢鼠标移动。

哦，如果你想增加与droppable的接近程度，我添加了两个你可以调整的变量。根据需要调整xmargin和ymargin变量。

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>

脚本

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

});

Answer 3

查看“视觉反馈”样本 jQuery UI，正如gmcalab所提到的，如果你只使用一个类作为选择器，那么没有ID就不是问题了。对不起，如果我没有正确读到这个。

Answer 4

将selector和selector2声明为您想要的任何内容......

$(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 5

你可以使用.hover（），所以当鼠标悬停在div上时，改变它的背景颜色：

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

通过改变鼠标位置来改变背景颜色

5 个答案: