更改背景颜色，改变鼠标位置

Question

我想知道是否可以在鼠标坐标的帮助下设置背景颜色。

我有的是：

我有一个DIV-A是拖动和其他一些的div它们投掷的。

我需要的是：

我需要强调我的网页，其中有可放开，每当我的DIV-A经过它们对其他申报单。我有什么是鼠标坐标，是否有可能应用CSS的鼠标坐标使用jQuery的基础上。

Answer 1

您可以使用.hover（）对于这一点，所以当鼠标在DIV，改变它的背景色：

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

Answer 2

声明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 3

像下面这样的东西可能会起作用。您可能需要处理窗口的scrollLeft和scrollTop以使其完美。你可能会想要throttle和memoize（如果放置位置不变）。

另外，一些更性能可以通过缓存offset()，仅在需要时结合mousemove，并通过调整each循环利用的优化循环（例如for(var i=droppables.length;i>-1;){var self = droppables.eq(--i);...}）进行调整出来。

还要注意，这只会在MOUSE通过它们时更改div的颜色......不一定当可拖动的文件经过它们时......这会使事情变得更加复杂一些，但下面的函数应该会向您发送在正确的方向。

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

看一看“视觉反馈”在 jQuery UI品尝过，并作为gmcalab提到的，没有标识不是一个问题，如果你只使用一个类的选择。对不起，如果我没有正确阅读这个。

Answer 5

我在这里为您发布了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'); 
    } 
    }); 
    }); 

});