mouseup事件怎么触发？
$(function(){$(".jindu").mousedown(function(e){$(".jindu").mouseover(function(e){vart...
$(function(){
$(".jindu").mousedown(function(e){
$(".jindu").mouseover(function(e){
var timer = null;
var pointX = e.pageX;
timer = setInterval(function(){
var pointX = e.pageX;
}, 100);
$('#control').css({'left':pointX});
});
$(".jindu").mouseup(function(){
clearInterval(timer);
})
});
})
实现div control的拖动效果。。mouseup事件怎么触发不了了。应该放在什么位置 展开
$(".jindu").mousedown(function(e){
$(".jindu").mouseover(function(e){
var timer = null;
var pointX = e.pageX;
timer = setInterval(function(){
var pointX = e.pageX;
}, 100);
$('#control').css({'left':pointX});
});
$(".jindu").mouseup(function(){
clearInterval(timer);
})
});
})
实现div control的拖动效果。。mouseup事件怎么触发不了了。应该放在什么位置 展开
1个回答
展开全部
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
.jindu { position: absolute; width: 100px; height: 100px; background-color: red; }
</style>
</head>
<script type="text/javascript" src="../lib/jquery-1.9.0.js"></script>
<script type="text/javascript">
$(function() {
var dnd = false;
var position = {};
$('.jindu').on('mousedown', function(e) {
position.x = e.pageX;
position.y = e.pageY;
dnd = true;
});
$(document).on('mouseup', function(e) {
dnd = false;
position = {};
}).on('mousemove', function(e) {
if (dnd) {
var newPosition = {
x: e.pageX,
y: e.pageY
};
var offsetX = newPosition.x - position.x;
var offsetY = newPosition.y - position.y;
var left = $('.jindu').offset().left;
var top = $('.jindu').offset().top;
$('.jindu').css('left', (left + offsetX) + 'px');
$('.jindu').css('top', (top + offsetY) + 'px');
position = newPosition;
}
});
});
</script>
<body>
<div class="jindu"></div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
.jindu { position: absolute; width: 100px; height: 100px; background-color: red; }
</style>
</head>
<script type="text/javascript" src="../lib/jquery-1.9.0.js"></script>
<script type="text/javascript">
$(function() {
var dnd = false;
var position = {};
$('.jindu').on('mousedown', function(e) {
position.x = e.pageX;
position.y = e.pageY;
dnd = true;
});
$(document).on('mouseup', function(e) {
dnd = false;
position = {};
}).on('mousemove', function(e) {
if (dnd) {
var newPosition = {
x: e.pageX,
y: e.pageY
};
var offsetX = newPosition.x - position.x;
var offsetY = newPosition.y - position.y;
var left = $('.jindu').offset().left;
var top = $('.jindu').offset().top;
$('.jindu').css('left', (left + offsetX) + 'px');
$('.jindu').css('top', (top + offsetY) + 'px');
position = newPosition;
}
});
});
</script>
<body>
<div class="jindu"></div>
</body>
</html>
更多追问追答
追问
能给我改改我代码不。只是拖拽个div我会做
追答
你也没描述清楚你想实现什么
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
