请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

页面元素拖拽操作的JQuery代码案例

 
<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含有滚动条产生的距离。


回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。