jquery实现对div的拖拽功能

<!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">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>拖动DIV</title>

        <style type="text/css">

        #show1 {

                background: #7cd2f8;

                width: 100px;

                height: 100px;

                text-align: center;

                position: absolute;

                z-index: 1;

                left: 0px;

                top: 0px;

                border: 1px solid black;

                }

        #show2 {

                background: #7cd2f8;

                width: 100px;

                height: 100px;

                text-align: center;

                position: absolute;

                z-index: 1;

                left: 100px;

                top: 0px;

                border: 1px solid black;

                }

        #show3 {

                background: #7cd2f8;

                width: 100px;

                height: 100px;

                text-align: center;

                position: absolute;

                z-index: 1;

                left: 200px;

                top: 0px;

                border: 1px solid black;

                }

        #show4 {

                background: #7cd2f8;

                width: 100px;

                height: 100px;

                text-align: center;

                position: absolute;

                z-index: 1;

                left: 0px;

                top: 100px;

                border: 1px solid black;

                }

        #show5 {

                background: #7cd2f8;

                width: 100px;

                height: 100px;

                text-align: center;

                position: absolute;

                z-index: 1;

                left: 100px;

                top: 100px;

                border: 1px solid black;

                }

        #show6 {

                background: #7cd2f8;

                width: 100px;

                height: 100px;

                text-align: center;

                position: absolute;

                z-index: 1;

                left: 200px;

                top: 100px;

                border: 1px solid black;

                }

        #show7 {

                background: #7cd2f8;

                width: 100px;

                height: 100px;

                text-align: center;

                position: absolute;

                z-index: 1;

                left: 0px;

                top: 200px;

                border: 1px solid black;

                }

        #show8 {

                background: #7cd2f8;

                width: 100px;

                height: 100px;

                text-align: center;

                position: absolute;

                z-index: 1;

                left: 100px;

                top: 200px;

                border: 1px solid black;

                }

        #show9 {

                background: #7cd2f8;

                width: 100px;

                height: 100px;

                text-align: center;

                position: absolute;

                z-index: 1;

                left: 200px;

                top: 200px;

                border: 1px solid black;

                }

        #right{

            width: 306px;

            height: 306px;

            position: absolute;

            top: 0px;

            left: 400px;

            border: 1px solid black;

        }

        </style>

        <script type="text/javascript" src="gongju/jquery-1.11.2.min.js"></script>

    </head>

    <body>

            <div class="show" id="show1" bs="1">

                1

            </div>

            <div class="show" id="show2" bs="2">

                2

            </div>

            <div class="show" id="show3" bs="3">

                3

            </div>

            <div class="show" id="show4" bs="4">

                4

            </div>

            <div class="show" id="show5" bs="5">

                5

            </div>

            <div class="show" id="show6" bs="6">

                6

            </div>

            <div class="show" id="show7" bs="7">

                7

            </div>

            <div class="show" id="show8" bs="8">

                8

            </div>

            <div class="show" id="show9" bs="9">

                9

            </div>

     <!----------------------------------------------->

         <div id="right">

         </div>

    </body>

</html>

<script type="text/javascript">

   var biao;

$(document).ready(function() {

    $(".show").mousedown(function(e) //e鼠标事件

        {

            biao=$(this).attr("bs");

            $(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"+biao+"").stop(); //加上这个之后

                    var _x = ev.pageX - x; //获得X轴方向移动的值

                    var _y = ev.pageY - y; //获得Y轴方向移动的值

                    $("#show"+biao+"").animate({

                        left: _x + "px",

                        top: _y + "px"

                    }, 10);

                });

        });

    $(document).mouseup(function() {

        $("#show"+biao+"").css("cursor", "default");

        $(this).unbind("mousemove");

    })

})

</script>

jquery实现对div的拖拽功能的更多相关文章

移动端多个DIV简单拖拽功能
移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...
JS实现多Div模块拖拽功能
空闲时间,同事让帮忙整个JS拖拽div模块功能.于是便在网上搜索,总结如下一个可实现多div模块拖拽的功能.一下是整体的HTML代码, 里边可以控制到拖拽开始(onStart),拖拽时候(onMov ...
使用jQuery Draggable和Droppable实现拖拽功能
上篇博客中已经介绍了web开发中基本拖放原理,现在给出需要完成的功能.最后运行的效果如下图所示: 主要功能需求说明: 1.左侧的元素结构最后会通过Ajax call服务器的数据来生成,能支持多级元素. ...
JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...
JQuery UI的拖拽功能实现方法小结
JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理首先要明确几个概念 ...
js进阶 12-17 jquery实现鼠标左键按下拖拽功能
js进阶 12-17 jquery实现鼠标左键按下拖拽功能一.总结一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...
DIV 实现可拖拽功能（留档）
//可拖拽功能 $.fn.extend({ //用法:$(element).jqDrag(); //element需要具备定位属性,需要手动调整层叠样式,这里只是修改鼠标拖动效果 ...
通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽
前言关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...
Js元素拖拽功能实现
Js元素拖拽功能实现需要解决的问题最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...

随机推荐

Java环境变量，真的还有必要配吗？
作为年龄上堪称老鸟而技术上却是菜鸟的老菜鸟,为了祖国的编程事业,不惜拿出一个月工资,淘了一台配置稍高的二手笔记本,打算与老笔记本中的撸啊撸片彻底说再见,誓要在新机种开启一番撸啊撸的新事业.当然,撸代码 ...
redis五种基本类型CRUD操作
1.String 增:set key1 value1 改:set key1 new-value.自增 incr key1.按照特定值递增:increby key1 inrevalue 删:del ke ...
IPFS: NAT traversal(NAT穿越)
IPFS是一个p2p网络,那么一定绕不开的一个问题就是NAT穿越.之前的文章里面也提到过IPFS网络连通性使用的ICE NAT穿越框架,本文简单介绍一下什么是NAT. 为什么有NAT技术? NAT ...
Knowledge point
静态网页的特点:以htm.html.sbtml.xml.js.css等为后缀扩展名. 1)程序在客户浏览器端解析,不需要读取数据库,性能和效率较高: 2)后端没有数据库支持,所以和用户的交互性差,功能 ...
gdb命令调试技巧
gdb命令调试技巧一.信息显示1.显示gdb版本 (gdb) show version2.显示gdb版权 (gdb) show version or show warranty3.启动时不显示提示信 ...
使用Intellij IDEA生成JavaDoc
以下是常用的注释标签,规范书写生成的文档中才能显示: @author 作者 @version 版本 @see 参考转向 @param 参数说明 @return 返回值说明 @exception 异常说 ...
自动识别移动端还是PC端
平时在开发中经常会遇到这样的需求,除了开发PC端之外,还会同时开发移动端.对于简单的页面,可以使用bootstrap之类的框架实现响应式页面,可是当页面很复杂的时候,就需要开发一个移动端页面,一个PC ...
Redis+Restful 构造序列号和压力测试【原创】
[本人原创],欢迎交流和分享技术,转载请附上如下内容:如果你觉得这篇文章对你有帮助,请记得帮我点赞, 谢谢!作者:kevin[转自]http://www.cnblogs.com/itshare/ 很多 ...
笔记：MyBatis XML配置-typeAliases 内建别名表
别名映射的类型 _byte byte _long long _short short _int int _integer int _double double _float float _boole ...
【眼见为实】自己动手实践理解READ COMMITTED && MVCC
[眼见为实]自己动手实践理解 READ COMMITTED && MVCC 首先设置数据库隔离级别为读已提交(READ COMMITTED): set global transacti ...

jquery实现对div的拖拽功能

jquery实现对div的拖拽功能的更多相关文章

随机推荐

热门专题