<head>
<meta http- equiv= "Content -Type" content= "text/html;
charset=utf-8" />
<title>页面元素拖拽操作JQ代码案例</title>
<style>
div{ width: 100px; height: 100px; background:red; position:
absolute; }
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js">
</script>
<script>
$ (function () {
var disX = 0;
var disY = 0;
$('div') . mousedown (function (ev) {
disX = ev.pageX - $ (this) .offset() .left;
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>
理解重点：
ev.pageX是针对页面与offset() .left针对窗口，他们之间区别是ev.pageX含有滚动条产生的距离。
|
