zoukankan      html  css  js  c++  java
  • 扩展了 jquery 的插件 easy drag

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

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

    /**
    * 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);

    调用代码:
        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"));
        });

  • 相关阅读:
    Python笔记(六)- 模型及Django站点管理
    Python笔记(五)--Django中使用模板
    Java中对象的复制
    Echarts堆积柱状图排序问题
    java基础
    java中的重载与重写
    struts2中配置文件的调用顺序
    struts2的工作原理
    拦截器和过滤器的区别
    Struts2中访问web元素的四种方式
  • 原文地址:https://www.cnblogs.com/RChen/p/easydrag.html
Copyright © 2011-2022 走看看