基于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
                        });
                    }