码迷,mamicode.com
首页 > 其他好文 > 详细

【拖拽】可拖拽的div

时间:2016-07-23 13:42:32      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:

//可拖拽的div
$.extend({
    extDrag: function(Selector_Target, Selector_Hot) { //Selector_Target:目标 , Selector_Hot:热区
        var $target = $(Selector_Target),
            uniqueness = new Date().getTime();
        $(Selector_Hot || $target).mousedown(function(e) {
            var _style = ‘<style>.drag-active{opacity:0.7!important}.drag-mask{position:fixed;height:100%;width:100%;z-index:999999998;background:#fff;opacity:0;filter:alpha(opacity=0);cursor:move}.drag-proxy{position:fixed;z-index:999999999;box-sizing:border-box;border:2px dashed #f00;background:rgba(255,255,0,0.2);cursor:move}</style>‘;
            $(‘body‘).append(‘<div id="‘ + uniqueness + ‘"><div class="drag-mask"></div><div class="drag-proxy">‘ + _style + ‘</div></div>‘);
            var $box = $(‘#‘ + uniqueness),
                $proxy = $box.find(‘div.drag-proxy‘);
            $proxy.css({
                ‘width‘: $target.addClass(‘drag-active‘).outerWidth(),
                ‘height‘: $target.outerHeight(),
                ‘top‘: $target.css(‘top‘),
                ‘left‘: $target.css(‘left‘)
            });
            var _offset = $target.offset();
            var x = e.pageX - _offset.left,
                y = e.pageY - _offset.top,
                left,
                top;
            var fMousemove = function(e) {
                left = e.pageX - x;
                top = e.pageY - y;
                if (top < 0) top = 1;
                $proxy.css({
                    ‘left‘: left,
                    ‘top‘: top
                });
            };
            var fMouseup = function() {
                $target.removeClass(‘drag-active‘).css({
                    ‘left‘: left,
                    ‘top‘: top
                });
                $box.remove();
                $(document).off(‘mousemove‘, fMousemove);
                $(document).off(‘mouseup‘, fMouseup);
            };
            $(document).on(‘mousemove‘, fMousemove);
            $(document).on(‘mouseup‘, fMouseup);
            return false;
        }).css(‘cursor‘, ‘move‘);
    }
});


//使用情况
$.extDrag(‘#Selector_Target‘, ‘#Selector_Hot‘); //参数可以是:字符串 || jQ对象 || DOM对象

 

【拖拽】可拖拽的div

标签:

原文地址:http://www.cnblogs.com/af-art/p/5698472.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!