jquery实现拖动

最新推荐文章于 2025-03-18 13:28:57 发布

ranruci

最新推荐文章于 2025-03-18 13:28:57 发布

阅读量394

点赞数

分类专栏： HTML5 Jquery 文章标签： jquery

HTML5 同时被 2 个专栏收录

3 篇文章

订阅专栏

Jquery

2 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
<style>
div{ width:100px; height:100px; background:red; position:absolute;}
</style>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script>


$(function(){


var disX = 0;
var disY = 0;


$('div').mousedown(function(ev){

disX = ev.pageX - $(this).offset().left;//获取鼠标到元素的left,top位置
disY = ev.pageY - $(this).offset().top;
$(document).mousemove(function(ev){

$('div').css('left',ev.pageX - disX);//获取移动后鼠标的位置，并重新赋值给元素
$('div').css('top',ev.pageY - disY);

});

$(document).mouseup(function(){

$(document).off();

});

return false;
});


});






</script>
</head>


<body>
<div></div>
</body>
</html>