//可拖拽 功能

$.fn.extend({
    //用法:$(element).jqDrag();
    //element需要具备定位属性,需要手动调整层叠样式,这里只是修改鼠标拖动效果
    jqDrag: function () {

var _drag = false, _self, _x, _y, cw, ch, sw, sh, dragBar, DragCnt,
            vxw = window, vxd = document, vxe = vxd.documentElement, vxg = vxd.getElementsByTagName('body')[0],
            //dragContent = (typeof dragContent == "undefined") ? dragControl : dragContent;
        _self = this;
        DragCnt = $(_self);
        DragBar = $(".dragbar", DragCnt);

DragBar.mouseup(function (e) {
            _drag = false;
            document.body.releaseCapture && this.releaseCapture();;
        }).mousedown(function (e) {
            _drag = true;
            _x = e.pageX - parseInt(DragCnt.css("left"));
            _y = e.pageY - parseInt(DragCnt.css("top"));
            winW = vxw.innerWidth || vxe.clientWidth || vxg.clientWidth;
            winH = vxw.innerHeight || vxe.clientHeight || vxg.clientHeight;
            cw = winW;
            ch = winH;
            sw = parseInt(DragCnt.outerWidth());
            sh = parseInt(DragCnt.outerHeight());
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            document.body.setCapture && this.setCapture();
            $(document).mousemove(function (e) {
                DragCnt.attr("posit", _x + "" + e.pageX);
                if (_drag) {
                    var x = e.pageX - _x;
                    var y = e.pageY - _y;
                    x = x < 0 ? x = 0 : x < (cw - sw) ? x : (cw - sw);
                    y = y < 0 ? y = 0 : y < (ch - sh) ? y : (ch - sh);

DragCnt.css({ top: y, left: x });
                    DragCnt.attr("posit", x + "_" + y);
                }
            });
        });
    }
});

DIV 实现可拖拽 功能(留档)的更多相关文章

  1. 多个div实现随意拖拽功能

    鼠标事件 mousedownmousemovemouseup注意事项:被拖动的div的position属性值一定是absolute.切记不可使用margin-top:10px;而应该使用top:10p ...

  2. 移动端多个DIV简单拖拽功能

    移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...

  3. (Demo分享)利用JavaScript(JS)实现一个九宫格拖拽功能

    利用JavaScript(JS)实现一个九宫格拖拽功能   Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...

  4. js进阶 12-17 jquery实现鼠标左键按下拖拽功能

    js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...

  5. js实现登陆页面的拖拽功能

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>登 ...

  6. React Editor 应用编辑器(1) - 拖拽功能剖析

    这是可视化编辑器 Gaea-Editor 的第一篇连载分析文章,希望我能在有限的篇幅讲清楚制作这个网页编辑器的动机,以及可能带来的美好使用前景(画大饼).它会具有如下几个特征: 运行在网页 文档流布局 ...

  7. JQuery UI的拖拽功能

    JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...

  8. 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

    前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...

  9. Js元素拖拽功能实现

    Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...

随机推荐

  1. Light OJ 1316 A Wedding Party 最短路+状态压缩DP

    题目来源:Light OJ 1316 1316 - A Wedding Party 题意:和HDU 4284 差点儿相同 有一些商店 从起点到终点在走过尽量多商店的情况下求最短路 思路:首先预处理每两 ...

  2. PDF解决方案(3)--PDF转SWF

    相关专题链接 PDF解决方案(1)--文件上传 PDF解决方案(2)--文件转PDF PDF解决方案(3)--PDF转SWF PDF解决方案(4)--在线浏览 前言:上一篇中介绍了上传的文件转PDF, ...

  3. Asterisk 未来之路3.0_0007

    原文:Asterisk 未来之路3.0_0007 Modules Asterisk 是基于模块构建的.一个模块提供某个特定的功能,它是动态的被装载.比如:信道驱动(chan_sip.so),或可以连接 ...

  4. MSSQL2008数据库备份还原和数据恢复

    原文:MSSQL2008数据库备份还原和数据恢复   序言 一直想写一篇关于数据库备份与恢复的文章,但基于能力的有限对数据库认知的有限怕不足以准确的表达,最后思考很久还是决定把自己的一些理解写出来供大 ...

  5. C注意,使用的语言字符串

    转载请注明出处! 在C语言没有具体的字符串数据类型,字符串的字符串常量和字符数组的形式. 实际上该字符串是零个或更多字符的字符串.并在整个位模式0NUL字节结束.因此,字符串所包括的字符内部不能出现N ...

  6. Oracle自主事务处理

    --当一个子程序调用另外一个子程序时,事务提交或回滚都将影响两个子程序 --为防止一个子程序的事务影响其他子程序,可以将这个子程序标记为自主事务处理 --这样自主事务成为一个独立的事务处理,不影响其他 ...

  7. char* 转换成 CString

    真是有意思: CString mess ;    mess = m_chLocalIP; 这样OK,但是写在一行就会报错 CString mess  = m_chLocalIP; //有问题

  8. SZU:J38 Number Base Conversion

    Judge Info Memory Limit: 32768KB Case Time Limit: 1000MS Time Limit: 1000MS Judger: Number Only Judg ...

  9. storm安装(2)ZeroMQ、JZMQ、Python、Java环境的安装

    2.ZeroMQ安装 把安装本件zeromq-2.1.7.tar.gz拷贝到home文件路径下, 给文件加入权限 chmod +x /home/zeromq-2.1.7.tar.gz 解压文件 tar ...

  10. C#接口总结

    C#接口总结 浅析C#接口特点及实例应用 C#接口(interface)的掌握对我们开发有什么作用呢?C#接口的使用能够使我们的程序有什么改进?那么我们首先我们来看看C#接口特点以及具体的实例使用分析 ...