//可拖拽的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对象
时间: 2024-10-04 11:12:58