基于Jquery的可拉拽控件的实现

    $('.start-icon').mousedown(                    function (e) {                        var hasMove = false;                        var isMove = true;                        var that = this;                        var abs_x = e.clientX - parseInt($(this).css('left'))||-5;                        var abs_y = e.clientY - parseInt($(this).css('top')) || -5;                        $(document).mousemove(function (e) {                              if (isMove) {                                  var obj = $(that);                                obj.css({ 'left': e.clientX-abs_x, 'top': e.clientY-abs_y });                            }                            hasMove = true;                        }                        ).mouseup(                                  function () {                                      isMove = false;                                    if (!hasMove) {                                        //点击而不是移动时间的处理                                    }                                }                          );                    }              );  

上面这种方法其实重复绑定了document的mouseMove事件。

下面这种方法就对上面的方法进行优化，和防止重复绑定，使用了冒泡事件，可以同时移动在#article中的具有.tool-banner的.tool-container容器的多个元素

var $g_moveObg=null,g_pointer=null;$('#article').mousedown(function (e) {var target = e.target || event.srcElement;                        if (target.className.indexOf('tool-banner') >= 0) {                            $g_moveObj = $(target).closest('.tool-container');                            $(e).of                            g_pointer = $g_moveObj.offset();                            g_pointer.left = event.clientX - g_pointer.left;                            g_pointer.top = event.clientY - g_pointer.top;                        }                    }).mousemove(function () {                        if ($g_moveObj) {                            $g_moveObj.css({                                'left': event.clientX - g_pointer.left,                                'top':event.clientY-g_pointer.top                            });                        }                    }).mouseup(function () {                        $g_moveObj = null;                        g_pointer = null;                    });

针对移动版，需要作出判断

                    //移动控件的监听                    var downHandler = function (e) {                        var target = e.target || event.srcElement;                        e = event.touches && event.touches[0] || event;//非触屏版的event.clientX是对应触屏版的event.touches.clientX                        if (target.className.indexOf('tool-banner') >= 0) {                            $g_moveObj = $(target).closest('.tool-container');                            g_pointer = $g_moveObj.offset();                            g_pointer.left = e.clientX - g_pointer.left;                            g_pointer.top = e.clientY - g_pointer.top;                        }                    }, moveHandler = function (e) {                        if ($g_moveObj) {                            e = event.touches && event.touches[0] || event;                            $g_moveObj.css({                                'left': e.clientX - g_pointer.left,                                'top': e.clientY - g_pointer.top                            });                        }                    }, upHandler = function () {                        $g_moveObj = null;                        g_pointer = null;                    };                    if ("ontouchend" in document) {                        //移动版                        $(window).on({                            'touchstart': downHandler,                            'touchmove': moveHandler,                            'touchend': upHandler                        });                    } else {                        //桌面版                        $(window).on({                            'mousedown': downHandler,                            'mousemove': moveHandler,                            'mouseup': upHandler                        });                    }