JQurey拖拽

最新推荐文章于 2018-10-25 15:16:30 发布

原创最新推荐文章于 2018-10-25 15:16:30 发布 · 479 阅读

0 ·

CC 4.0 BY-SA版权

jqurey 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个简单的使用HTML、CSS和JavaScript实现的拖拽效果。通过鼠标操作可以随意移动页面上的DIV元素位置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
<style>
*{margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
<script src="jquery-1.7.2.js"></script>
<script>
$('div').mousedown(function(e){
// alert(1);
var _x = e.pageX-parseInt($('div').css('left'));
var _y = e.pageY-parseInt($('div').css('top'));
// alert(_x);
$(document).mousemove(function(e) {
var x = e.pageX-_x;
var y = e.pageY-_y;
$('div').css({'left':x,'top':y});
});
$(document).mouseup(function() {
$(document).unbind('mousemove');
$(document).unbind('mouseup');
});
return false;//
});
</script>