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"));
        });

  • 相关阅读:
    164 Maximum Gap 最大间距
    162 Find Peak Element 寻找峰值
    160 Intersection of Two Linked Lists 相交链表
    155 Min Stack 最小栈
    154 Find Minimum in Rotated Sorted Array II
    153 Find Minimum in Rotated Sorted Array 旋转数组的最小值
    152 Maximum Product Subarray 乘积最大子序列
    151 Reverse Words in a String 翻转字符串里的单词
    bzoj3994: [SDOI2015]约数个数和
    bzoj 4590: [Shoi2015]自动刷题机
  • 原文地址:https://www.cnblogs.com/RChen/p/easydrag.html
Copyright © 2011-2022 走看看