jQuery和MouseEvents

我有一個關於jQuery庫中鼠標事件的問題。我有一個簡單的JavaScript函數如下：jQuery和MouseEvents

$(function() { 
    var xpos; 
    var ypos; 
    $("#pic1").mousedown(function() { 
     $("#pic1").mousemove(function(e) { 
      xpos = e.pageX; 
      ypos = e.pageY; 
      $("#pic1").css({'left': xpos, 'top': ypos}); 
     }); 
    }); 
});

但它使您可以點擊圖像並將其周圍跟隨鼠標。我試圖通過使用mouseup函數使其停止，但它似乎不能打破「repaint」方法，它會更新css座標。

HTML：

<img id="pic1" src="img/test.jpg" alt="">

CSS：

#pic1 { 
position: absolute; 
}

會不會有做到這一點更簡單的方法？

來源

2013-10-13 Andreas

在另一個事件處理程序中添加一個事件處理程序，就像你在做的那樣，幾乎不是一個好主意。每次發生「mousedown」事件時，您都會添加另一個「mousemove」處理程序。 – Pointy

@Point我同意，儘管在這種情況下，他所做的可能是有效的......只要他在'mouseup'處理程序中刪除'mousemove'處理程序即可。 –

是的，當你按下鼠標時，計劃是讓它跟隨，當你放開時釋放。 – Andreas

您將鼠標移動觸發器的設置方式綁定在鼠標上。要刪除元素，您需要解除觸發器綁定（http://api.jquery.com/unbind/）或在移動處理程序中設置條件，以便只有在條件滿足時才更新元素的位置，然後確保鼠標向下/向上轉動該條件開/關。前者似乎簡單，但更簡單的可能是使用jQuery用戶界面：http://jqueryui.com/draggable/

好運

來源

2013-10-13 04:10:40 olleicua

如果你不想使用jQuery UI的拖動，您的結構將是這個樣子：

$(function() {   
    $("#pic1").on('mousedown', function() { 
     $(this).on('mousemove', function(e) { 
      $(this).css({'left': e.pageX, 'top': e.pageY}); 
     }); 
    }).on('mouseup', function() { 
     $(this).off('mousemove'); 
    }); 
});

來源

2013-10-13 04:14:57

是的，這似乎有用。我想我可以從這個工作。謝謝！ – Andreas

下面是使用jQuery .on()和.off()一點重構：

$(function() { 
    var xpos, 
     ypos, 
     $pic = $('#pic1'); 

    $pic.on('mousedown', function() { 
     $pic.on('mousemove', function(e) { 
      xpos = e.pageX; 
      ypos = e.pageY; 
      $pic.css({'left': xpos, 'top': ypos}); 
     }); 
    }); 

    $pic.on('mouseup',function(){ 
     $pic.off('mousemove'); 
    }); 
});

演示：http://jsfiddle.net/tYpKL/1/

.off()是一個非常有用的方法，可以讓您解除與.on()設置的方法。

我想你應該考慮使用一個庫來處理這個功能，因爲從演示中可以看出，你甚至沒有接近可靠的用戶體驗。 :)

祝你好運！

來源

2013-10-13 04:18:31

非常感謝您的幫助！不知道.on（），。off（）功能 – Andreas

有一個更簡單的解決方案。

HTML：

<html> 
<head> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <style> 
     #pic1 { width: 100px; height: 100px; padding: 1px; } 
    </style> 
    <script> 
     $(function() { 
      $("#pic1").draggable(); 
     }); 
    </script> 
</head> 
<body> 
    <div id="pic1" class="ui-widget-content"> 
     <img src="pic1.jpg" alt="Image 1"> 
    </div> 
</body> 
</html>

這裏是一個鏈接（http://api.jqueryui.com/draggable/），將解釋用於拖動功能的API的所有細節。

來源

2013-10-13 04:28:42

是的，這是正確的 – Andreas

我通過編輯原始信件在上面更新了這個。希望這可以幫助。 –

謝謝，我剛剛提到了使用jQuery UI。它使一切變得容易！ – Andreas

jQuery和MouseEvents

回答

相關問題