扩展了 jquery 的插件 easy drag

jquery 实现拖动的插件,试了几个,interface 是一个,但是 bug 太多,代码又复杂不好修改,就放弃了。
今天找到了一个叫做 easydrag 的,但用了下也不灵活,于是扩充了一下,现在可以指定拖动的 handle.

jquery.easydrag.js(以下绿色部分是我增加或修改的代码):

<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>-->/**
* EasyDrag 1.3 - Drag & Drop jQuery Plug-in
*
* For usage instructions please visit http://fromvega.com
*
* Copyright (c) 2007 fromvega
*/

(function($){

// to track if the mouse button is pressed
    var isMouseDown    = false;

// to track the current element being dragged
    var currentElement = null;

// callback holders
    var dropCallbacks = {};
    var dragCallbacks = {};

// global position records
    var lastMouseX;
    var lastMouseY;
    var lastElemTop;
    var lastElemLeft;

// returns the mouse (cursor) current position
    $.getMousePosition = function(e){
        var posx = 0;
        var posy = 0;

if (!e) var e = window.event;

if (e.pageX || e.pageY) {
            posx = e.pageX;
            posy = e.pageY;
        }
        else if (e.clientX || e.clientY) {
            posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            posy = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
        }

return { 'x': posx, 'y': posy };
    }

// updates the position of the current element being dragged
    $.updatePosition = function(e) {
        var pos = $.getMousePosition(e);

var spanX = (pos.x - lastMouseX);
        var spanY = (pos.y - lastMouseY);

$(currentElement).css("top",  (lastElemTop + spanY));
        $(currentElement).css("left", (lastElemLeft + spanX));
    }

// when the mouse is moved while the mouse button is pressed
    $(document).mousemove(function(e){
        if(isMouseDown){
            // update the position and call the registered function
            $.updatePosition(e);
            if(dragCallbacks[currentElement.id] != undefined){
                dragCallbacks[currentElement.id](e);
            }

return false;
        }
    });

// when the mouse button is released
    $(document).mouseup(function(e){
        if(isMouseDown){
            isMouseDown = false;
            if(dropCallbacks[currentElement.id] != undefined){
                dropCallbacks[currentElement.id](e);
            }
            return false;
        }
    });

// register the function to be called while an element is being dragged
    $.fn.ondrag = function(callback){
        return this.each(function(){
            dragCallbacks[this.id] = callback;
        });
    }

// register the function to be called when an element is dropped
    $.fn.ondrop = function(callback){
        return this.each(function(){
            dropCallbacks[this.id] = callback;
        });
    }

// set an element as draggable - allowBubbling enables/disables event bubbling
    $.fn.easydrag = function(allowBubbling, handle_ids){

return this.each(function(){

// if no id is defined assign a unique one
            if(undefined == this.id) this.id = 'easydrag'+time();

if (handle_ids) {
                // 修改鼠标光标为移动的形状
                for (var i=0; i<handle_ids.length; i++) {
                    $("#" + handle_ids[i]).css("cursor", "move");
                }
            } else {
                $(this).css("cursor", "move");
            }
            
            // when an element receives a mouse press
            $(this).mousedown(function(e){
                if (handle_ids) {
                    // 判断是否是在拖动某个 handle
                    var srcElement;
                    if (e)
                        srcElement = e.srcElement;
                    else
                        srcElement = window.event.srcElement;
                    
                    var exists = false;
                    if (srcElement.id != undefined) {
                        for (var i=0; i<handle_ids.length; i++) {
                            if (handle_ids[i] == srcElement.id) {
                                exists = true;
                                break;
                            }
                        }
                    }
                    if (!exists)
                        return false;
                }
                // set it as absolute positioned
                $(this).css("position", "absolute");

// set z-index
                $(this).css("z-index", "10000");

// update track variables
                isMouseDown    = true;
                currentElement = this;

// retrieve positioning properties
                var pos    = $.getMousePosition(e);
                lastMouseX = pos.x;
                lastMouseY = pos.y;

lastElemTop  = this.offsetTop;
                lastElemLeft = this.offsetLeft;

$.updatePosition(e);

return allowBubbling ? true : false;
            });
        });
    }

})(jQuery);

调用代码:

<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>-->    win.easydrag(false, ['oDragHandle_' + id]);
 
    // 自定义的拖放后处理,记录目标移动到的新位置
    win.ondrop(function(){
        // save position info
        notesData[id].x = parseInt(win.css("left"));
        notesData[id].y = parseInt(win.css("top"));
    });

转载地址:http://www.cnblogs.com/RChen/archive/2007/09/20/easydrag.html

扩展了 jquery 的插件 easy drag (转载 木野狐)相关推荐

  1. 10个漂亮的jQuery日历插件下载【转载】

    10个漂亮的jQuery日历插件下载 2013-08-07 标签:jQuery日历插件jQuery日历jQuery插件 日期是非常重要的,随时随地.微薄或网站的日期选取器日历必须在那里.您可以使用任何 ...

  2. 超强1000个jquery极品插件!(感觉好强大,转载一下)

    花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...

  3. JQuery模板插件jquery.tmpl-动态ajax扩展

    在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件.有时我们需要去动态的ajax去加载模板,或者数据,根据url参数或者其他信息加载不同的模板,数据.在我的某个项目中有这个需求,所以 ...

  4. 基于jQuery的插件扩展,主要用于识别浏览器内核与外壳的类型和版本

    写了个基于jQuery的插件扩展,主要用于识别浏览器内核与外壳的类型和版本.可识别各种浏览器的内核,并已经支持多种国内主流浏览器.  费话不多说,上我的JavaScript代码:(文件名:jquery ...

  5. 超强1000个jquery极品插件!(连载中。。。。最近更新20090710)

    花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...

  6. 超强1000个jquery极品插件!

    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ accordion类 +++++++++++++ ...

  7. 超强1000个jquery极品插件

    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ accordion类 +++++++++++++ ...

  8. 推荐15款响应式的 jQuery Lightbox 插件

    利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...

  9. 50个精心收集的惊人的jquery绚丽插件--功能全覆盖

    原文地址:http://www.cnblogs.com/58top/archive/2012/08/03/2622060.html TN3 Gallery – jQuery Slider and Im ...

最新文章

  1. elasticsearch-.yml(中文配置详解)
  2. 机器人十大前沿热点领域(2012-2022年)
  3. CCNP学习笔记(6)
  4. Verify that you have sufficient access to that key
  5. 【DIY】填坑,热水器自动定时烧水断电方案,预期目标及功能
  6. easyx 备忘录_记在iPhone备忘录里的便签信息安全吗 - 学显
  7. c语言判断这天是星期几,【求指导!!】输入年,月,日,然后判断这天是星期几!!!!!...
  8. mitmproxy抓包 | Python疑难测试场景mock
  9. Flink 数据类型
  10. 吴恩达机器学习 逻辑回归 作业2(芯片预测) Python实现 代码详细解释
  11. 《Pro ASP.NET MVC 3 Framework》学习笔记之十四【示例项目SportsStore】
  12. Velocity之vm页面注释
  13. 解决:The requested URL returned error: 403
  14. 曾经我创办了个公司,然后被投资人踢出去了......
  15. 从零开始做手机云台/稳定器
  16. 私有云的部署(详细)
  17. 设计模式之禅之单例模式
  18. 高校学生免费领阿里云ECS
  19. 小程序wx:if和hidden
  20. centos7 安装mysql-community-5.7.33

热门文章

  1. 计算机内存和外存的特点,内存与外存的主要特点
  2. 电脑如何批量下载哔哔视屏_我是电脑哔哔哔哔哔
  3. java 手动触发gc_java触发full gc的几种情况整理
  4. codeforces 897 D Ithea Plays With Chtholly(交互)
  5. python图片修改过、有原图、怎么得到改动的地方_python--修改证件照的大小
  6. 更好玩的跑步机,还有丰富课程资源,赤兔Air跑步机体验
  7. google chrome
  8. aspx结尾文件网站的发布过程
  9. [史上最全]笔记本更换内存条和固态硬盘重装系统教程
  10. 四川省着力打造三位一体服务平台,精准服务保障农民工