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>
赞 (0)

相关推荐

  • jQuery拖动元素并对元素进行重新排序

    jQuery拖动元素并对元素进行重新排序

    本文实例讲述了jQuery拖动元素并对元素进行重新排序的实现方法,分享给大家供大家参考,具体实现内容如下 效果图: 具体内容如下: 从上图可以看出我们今天要实现的功能.当用户拖动一个图片时,就能改变图片的已有排序并更新表中的排列顺序.比如用户可以随意拖动我们网站中的布局,如谷歌iGoogle就已经实现了.这样便很好的提高了用户体验. 下边,我们一步一步来实现这个功能. <span id="show"> <div> <input id="check

  • jQuery实现拖动效果的实例代码

    jQuery实现拖动效果的实例代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <style> div{ width:100px; height:100px; background:red; position:absolute;} </style> <script type="text/javascript" src="js/jquery-1.11.3.js">

  • jquery拖动层效果插件用法实例分析(附demo源码)

    本文实例讲述了jquery拖动层效果插件用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="l

  • jQuery动态添加可拖动元素完整实例(附demo源码下载)

    jQuery动态添加可拖动元素完整实例(附demo源码下载)

    本文实例讲述了jQuery动态添加可拖动元素的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: index.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type&

  • 使用jQuery的easydrag插件实现可拖动的DIV弹出框

    使用jQuery的easydrag插件实现可拖动的DIV弹出框

    EasyDrag 是一个用来实现页面元素拖拉的 jQuery 插件. 在没遇到easydrag插件之前,想实现一个弹出框并不是一件轻而易举的事情! 人们常说没有不劳而获的事情,但在编码的世界中却不是这样.更多的开源框架方面了我们,也毒害了我们! 废话少说,先看效果: 全部代码: <!DOCTYPE HTML> <html> <head> <title>easydrag实现可拖动的DIV弹出框</title> <style> /* 重置

  • jQuery实现移动端滑块拖动选择数字效果

    jQuery实现移动端滑块拖动选择数字效果

    本文为大家分享了基于jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字,供大家参考,具体内容如下 运行效果图: 实现代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="gb2312"> <title>demo</title> <link rel="stylesheet"

  • jQuery实现简单的DIV拖动效果

    本文实例讲述了jQuery实现简单的DIV拖动效果.分享给大家供大家参考,具体如下: 创建一个HTML文件,复制以下代码进去,修改jquery文件(没有的到网上去下一个,我使用的是jquery-1.8.2),即可以运行了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&

  • 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/jque

  • jquery 判断div show的状态实例

    实例如下: var temp= $("#test").is(":hidden");//是否隐藏 var temp1= $("#test").is(":visible");//是否可见 以上这篇jquery 判断div show的状态实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • JavaScript:Div层拖动效果实例代码

    JavaScript:Div层拖动效果实例代码

    Div层拖动效果图: 实现:CSS: 复制代码 代码如下: <style>div{position:relative;}</style> JS: 复制代码 代码如下: <script type="text/javascript"> var mouseover=truevar xcoor;var ycoor;function coordinates(){ if (event.srcElement.id.indexOf("wishbroad&q

  • jQuery实现div拖拽效果实例分析

    本文实例分析了jQuery实现div拖拽效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <script type=&q

  • 使用jquery实现div的tab切换实例代码

    jQuery实现Tab切换 接触jQ不久以前的js代码来写的简单效果现在用jQ来写: HTML代码: 复制代码 代码如下: <div id="sidebar-tab"> <div id="tab-title"> <h3><span class="selected">最新评论</span><span>近期热评</span><span>随机文章</s

  • Jquery写一个鼠标拖动效果实现原理与代码

    近日项目中要做一个鼠标拖拽层的效果,于是手动使用Jquery做了一个,发出来跟大伙儿分享一下,并希望能得到高手的指点,如果哪位大侠觉得我的思路和代码不正确或者需要改进的话,希望能指点一二,在下感激不尽. 我的思路是这样的: 1.在鼠标按下的时候,捕获鼠标的当前位置: 2.得到要移动对象的当前位置信息: 3.鼠标移动时,计算鼠标移动的距离,将这个距离更新到对象的位置,在我的代码中,我试用绝对定位来表示对象的位置: 4.当鼠标移出对象或者鼠标弹起的时候,则认为对象处于不能移动的状态.这个在我的代码中

  • 基于jquery的DIV随滚动条滚动而滚动的代码

    核心代码: 复制代码 代码如下: <script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function() { $(window).scroll(function() { var top = $(

  • js网页中随意拖动的小方块实现代码

    function divBlock_event_mousedown(e){ var e, obj, temp; obj=document.getElementById("divBlock"); e=window.event?window.event:e; obj.startX=e.clientX-obj.offsetLeft; obj.startY=e.clientY-obj.offsetTop; document.onmousemove=document_event_mousemov

  • asp 网页视频播放器程序代码(通用代码),支持avi,wmv,asf,mov,rm,ra,ram等

    思路是先取得文件的类型,并根据类型选择不同的网页播放器代码..三下五去二.....同时为了代码在以后的复用性,写成了通用的调用函数.方便以后在别的系统中调用.. 现发布源代码如下: 复制代码 代码如下: Sub SelPlay(strUrl,strWidth,StrHeight) Dim Exts,isExt If strUrl <> "" Then isExt = LCase(Mid(strUrl,InStrRev(strUrl, ".")+1)) E

  • PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解

    PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解

    想拖动页面上的层,完全可以用jQuery ui的Draggable方法来实现,那如何将拖动后层的位置保存下来呢?本文将给出答案.本文讲解了如何采用PHP+MySQL+jQuery,实现随意拖动层并即时保存拖动位置. 本文原理就是通过拖动将拖动后层的相对位置left,top和z-index三个参数更新到数据表中对应的记录,页面通过CSS解析每个层不同的位置.请看具体实现步骤. 准备MySQL数据表 首先需要准备一张表notes,用来记录层的内容,背景色和坐标等信息. CREATE TABLE IF

随机推荐