欢迎您访问我爱IT技术网,今天小编为你分享的javascript教程:【jQuery实现div随意拖动的实例代码(通用代码)】,下面是详细的讲解!
jQuery实现div随意拖动的实例代码(通用代码)
<script type="text/javascript"><!-- $(document).ready(function() { $(".show").mousedown(function(e)//e鼠标事件 { $(this).css("cursor","move");//改变鼠标指针的形状 var offset=$(this).offset();//DIV在页面的位置 var x=e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离 var y=e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离 $(document).bind("mousemove",function(ev)//绑定鼠标的移动事件,因为光标在DIV元素外面也要有效果,所以要用doucment的事件,而不用DIV元素的事件 { $(".show").stop();//加上这个之后 var _x=ev.pageX - x;//获得X轴方向移动的值 var _y=ev.pageY - y;//获得Y轴方向移动的值 $(".show").animate({left:_x+"px",top:_y+"px"},10); }); }); $(document).mouseup(function() { $(".show").css("cursor","default"); $(this).unbind("mousemove"); }) }) // --></script>
关于jQuery实现div随意拖动的实例代码(通用代码)的用户互动如下:
相关问题:写源代码:Javascript动态改变DIV位置(随便的举一...
答:这只是一个很简单的改变div的left和top来实现其位置 一行目标文字! var x = 0,y=100; var obj=document.getElementById("obj"); function img() { obj.style.left = x ; obj.style.top = y ; x = x +1; if(x>=500) { clearInterval(time); } } ... >>详细
相关问题:求jquery实现的div拖拽功能,要兼容性非常好的,代...
答:推荐使用jQuery easyui,整个组件中包含有拖放插件,同时你可以使用easyloader加载某个插件。 你下载一下看看他们的demo,有实例的代码,操作很容易。 >>详细
相关问题:我用下面这种方式拖动层,但是我想控制拖动范围只...
答: $(function () { $("#draggable3").draggable({ containment: '#containment-wrapper', scroll: false }); //容器拖动 }) 我只能在容器里拖动 http://www.jb51.net/jiaoben/24271.html //这里下载,有实例和代码,自己去看看 >>详细
- 【firefox】firefox浏览器不支持innerText的解决
- 【Extjs】Extjs学习过程中新手容易碰到的低级错误
- 【clearInterval】js clearInterval()方法的定义
- 【dom】javascript dom追加内容实现示例-追加内容
- 【checkbox】让checkbox不选中即将选中的checkbox
- 【Array】js中更短的 Array 类型转换-类型转换
- 【append】append和appendTo的区别以及appendChil
- 【ExtJs】ExtJs 表单提交登陆实现代码-表单提交-
- 【addClass】javascript自定义的addClass()方法
- 【Event】jquery下为Event handler传递动态参数的
- 评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
-