【div随意拖动】jQuery实现div随意拖动的实例代码(通用代码)-jquery实现div拖动

欢迎您访问我爱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 //这里下载,有实例和代码，自己去看看 >>详细