jQuery and MouseEvents
jQuery and MouseEvents
我有一个关于jQuery库中鼠标事件的问题。我有一个简单的javascript函数,如下所示:
$(function() {
var xpos;
var ypos;
$("#pic1").mousedown(function() {
$("#pic1").mousemove(function(e) {
xpos = e.pageX;
ypos = e.pageY;
$("#pic1").css({'left': xpos, 'top': ypos});
});
});
});
它使您可以单击图像,然后它跟随鼠标四处走动。我试图通过使用鼠标向上功能使其停止跟随,但它似乎无法破坏"重绘"方法,它更新了 css 坐标。
.HTML:
<img id="pic1" src="img/test.jpg" alt="">
.CSS:
#pic1 {
position: absolute;
}
有没有更简单的方法来实现这一点?
您设置鼠标移动触发器的方式绑定在鼠标按下时。 要删除元素,您需要取消绑定触发器 (http://api.jquery.com/unbind/) 或在移动处理程序中设置条件,以便仅在满足条件时才更新元素的位置,然后确保按下/向上鼠标打开/关闭该条件。 前者似乎更简单,但更简单的可能是使用 jquery ui: http://jqueryui.com/draggable/
祝你好运
如果你不想使用 jquery ui draggable,你的结构将如下所示:
$(function() {
$("#pic1").on('mousedown', function() {
$(this).on('mousemove', function(e) {
$(this).css({'left': e.pageX, 'top': e.pageY});
});
}).on('mouseup', function() {
$(this).off('mousemove');
});
});
以下是使用 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()
设置的方法。
我认为您应该考虑使用库来处理此功能,因为从演示中可以看出,您甚至没有接近可靠的用户体验。 :)
祝你好运!
有一个更简单的解决方案。
.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 的所有详细信息。
相关文章:
- Selenium WebDriver and JavaScript change
- PHP and Javascript functions
- Javascript Return and if/else
- SetTimeout and clearTimeout in Javascript
- lightbox in html 5 and javascript
- TimelineJS and AngularJS
- timeago.js with datatable and PHP
- javascript button ajax and php
- Ajax and Json with Rails
- Combine onload, onresize and onclick
- php布尔值's小写AND大写和数字布尔值'可以接受
- setTimeout and V8
- Jquery post and onclick
- Moment js and IOS
- Rails 3.2 and Paloma gem
- Backbone, TypeScript, and super
- iframe and JavaScript on different pages
- JSON and jQuery Search
- jQuery and MouseEvents
- Javascript, MouseEvents and Classes