更改背景顏色，改變鼠標位置

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

});