zoukankan      html  css  js  c++  java
  • javascript拖拽原理与简单实现方法[demo]

           美国人有一句常用的俗语—“Re-inventing the Wheel”,从字面上来解释就是“重新发明轮子”。可是轮子早已问世,再要去发明岂非劳而无功?

      产品经理发下需求,实施者再到网上搜索代码,也许很快就搜到对应的代码。简单的交互和提交常用的交互,很容易的网上找到相应的代码。一些复杂的交互、定制行比较强的交互,网上找代码就有些困难的。所有复杂交互都是简单交互的组成,所以搜索别人的代码是以学习为主,把别人的基础方法掌握了。拿到需求就不必要到网上搜代码,这样永远也不能提升自己的能力。

      业余时间写的一个,简单拖拽框架代码,但比较容易扩展。

      源码下载:http://yunpan.cn/QGYBju4vcRxZz

           例子:


































     源码:

     1 /**
     2  * jQuery拖拽
     3  * @author: heshimeng1987@qq.com
     4  */
     5 ~function($, window, undefined){
     6     var win = $(window),
     7         doc = $(document),
     8 
     9     drag = function(target, options){
    10         return new drag.fn.init(target, options);
    11     };
    12 
    13     drag.fn = drag.prototype = {
    14         init: function(target, options){
    15 
    16             var that = this;
    17             this.target = $(target);
    18             options = options || {};
    19             this.root   = options.root ? $(options.root) : this.target;
    20             this.min    = options.min;
    21             this.max    = options.max;
    22             this.start  = options.start;
    23             this.move   = options.move;
    24             this.end    = options.end;
    25             // this.fixed  = options.fixed === undefined ? true : options.fixed;
    26             this.startPosition = {};
    27             this.movePosition  = {};
    28             var _down = function(e){
    29                     that.startPosition = {x: e.clientX-parseInt(that.root.css('left')),
    30                                           y: e.clientY-parseInt(that.root.css('top'))};
    31                     that.start&&that.start(that.startPosition);
    32                     doc.bind('mousemove', _move)
    33                     .bind('mouseup', _end);
    34                     return false;
    35                 },
    36                 _move = function(e){
    37                     that.movePosition = {x: e.clientX - that.startPosition.x,
    38                                          y: e.clientY - that.startPosition.y};
    39                     that.limit();
    40                     that.root.css({
    41                         left: that.movePosition.x,
    42                         top: that.movePosition.y
    43                     });
    44                     that.move&&that.move(that.movePosition);
    45                     return false;
    46                 },
    47                 _end = function(){
    48                     doc.unbind('mousemove', _move)
    49                     .unbind('mouseup', _end);
    50                     that.end&&that.end(that.movePosition);
    51                     return false;
    52                 };
    53 
    54             this.target.bind('mousedown',_down);
    55         },
    56         /**
    57          * 移动的位置限制
    58          */
    59         limit: function(){
    60             if(this.min !== undefined){
    61                 this.movePosition = {
    62                     x: Math.max( this.min.x, this.movePosition.x ),
    63                     y: Math.max( this.min.y, this.movePosition.y )
    64                 };
    65             }
    66             if(this.max !== undefined ){
    67                 this.movePosition = {
    68                     x: Math.min( this.max.x, this.movePosition.x ),
    69                     y: Math.min( this.max.y, this.movePosition.y )
    70                 };
    71             }
    72         }
    73     };
    74     drag.fn.init.prototype = drag.fn;
    75     $.drag = drag;
    76 
    77 
    78 }(jQuery, this);


    后续将制作一个完善的对话框功能,
    当然也可以扩展一些小功能。比如,我工作中编写了一个身高拖拽表单,提供一个效果,这里就不提供源码了:



    转载请注明出处:http://www.cnblogs.com/dreamback

    如有任何建议或疑问,欢迎留言讨论。



























     例子1.
    $.drag('#target1');
    

    例子2.

    $.drag('#target2',{ root:'#root2' });
    

    例子3.

    最小范围:min:{x:100,y:10}

    最大范围:max:{x:900,y:2000}

    开始:false

    移动:false

    结束:false

    $.drag('#target3',
    {
        root:'#root3',
        min:{x:100,y:10},
        max:{x:900,y:2000},
        start: function(pos){
            $('#isEnd').html('false');
            $('#isStart').html('true, x='+pos.x+', y='+pos.y);
        },
        move: function(pos){
            $('#isMove').html('true, x='+pos.x+', y='+pos.y);
        },
        end: function(pos){
            $('#isEnd').html('true, x='+pos.x+', y='+pos.y);
            $('#isStart').html('false');
            $('#isMove').html('false');
        }
    });
  • 相关阅读:
    HDU 3572 Task Schedule(拆点+最大流dinic)
    POJ 1236 Network of Schools(Tarjan缩点)
    HDU 3605 Escape(状压+最大流)
    HDU 1166 敌兵布阵(分块)
    Leetcode 223 Rectangle Area
    Leetcode 219 Contains Duplicate II STL
    Leetcode 36 Valid Sudoku
    Leetcode 88 Merge Sorted Array STL
    Leetcode 160 Intersection of Two Linked Lists 单向链表
    Leetcode 111 Minimum Depth of Binary Tree 二叉树
  • 原文地址:https://www.cnblogs.com/dreamback/p/js-drag.html
Copyright © 2011-2022 走看看