jQuery实现div随意拖动的实例代码(通用代码)
更新时间：2016年01月28日 09:24:01 作者：phpervip
这篇文章主要介绍了jQuery实现div随意拖动的实例代码，涉及到jquery div随意拖动相关知识，感兴趣的朋友一起学习吧
注意js放的位置，要放的靠近，若被其他覆盖，则无法移动。
比如：
<div id="move">可移动的DIV</div>
引入jquery.js, jquery-ui.js,
<script scr="http://code.jquery.com/jquery-1.10.2.js"></script> <script scr="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
一句：
$("#move").draggable();
如希望，点住时鼠标变手形：
$("#move").mousedown(function(){
$(this).css("cursor","pointer");
}).mouseup(function(){
$(this).css("cursor","default");
});
下面给大家分享一段通用代码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 EasyUI API 中文帮助文档和扩展实例 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
这篇文章主要为大家详细介绍了基于jQuery实现滚动切换效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
这篇文章主要介绍了jQuery使用模式窗口实现在主页面和子页面中互相传值的方法,涉及jQuery模式窗口及参数传递相关技巧,需要的朋友可以参考下2016-03-03
Slides – 是一个简单的，容易定制和风格化，的jQuery幻灯片插件。Slides提供褪色或幻灯片过渡效果，图像淡入淡出，图像预压，自动生成分页，循环，自动播放的自定义等很多选项。用Slides插件，你可以随机播放幻灯片，设定那一套您想要开始幻灯片。2015-04-04
本文给大家汇总介绍了2015年7月最新发布的最热最实用的15款jQuery插件，都有着非常炫酷的效果，十分的实用，这里推荐给大家。2015-07-07
这篇文章主要为大家详细介绍了jquery实现左右轮播切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
下面小编就为大家带来一篇完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
这篇文章主要为大家详细介绍了基于jquery实现日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
这篇文章介绍了jquery设置控件位置的方法，有需要的朋友可以参考一下2013-08-08
本篇文章主要是对JSON对象与字符串之间的相互转换进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
最新评论