Toddify

Emulate Todd's 'white' screen.

by will

HTML

<a id="test" href="javascript:(function(){if(!$('body').data('dragqueen')){var $b=$('body'),$s=$('<style/>',{id:'drag-queen-styles',type:'text/css',html:'*{-webkit-user-select: none;}.dragqueen{-webkit-transform:translateZ(0)}'});$b.data('dragqueen',true);$s.appendTo('head');$b.on('mousedown.dragqueen',function(e){var $e=$(e.target),$p=$e.offsetParent(),pos=$e.css('position');if(pos=='absolute'||pos=='relative'||pos=='fixed'){$e.addClass('dragqueen');var mStart={x:e.pageX,y:e.pageY},pStart={x:$p.offset().left,y:$p.offset().top},eStart={x:$e.position().left,y:$e.position().top};$b.on('mousemove.dragqueen mouseup.dragqueen',function(e){if(e.type=='mousemove'){var eNew={x:eStart.x-(mStart.x-e.pageX),y:eStart.y-(mStart.y-e.pageY)};$e.css({top:eNew.y,left:eNew.x})}else{$b.off('mousemove.dragqueen mouseup.dragqueen');$e.removeClass('dragqueen')}e.preventDefault()})}e.preventDefault()})}else{$('body').off('mousedown.dragqueen mouseup.dragqueen').data('dragqueen',false);$('#drag-queen-styles').remove();$b=$s=false}})();">Drag Queen</a>

<p>Drag the link above into your bookmarks bar</p>

JavaScript

var dragQueen = function(){
    
    if( !$('body').data('dragqueen') ){
    
        var $b = $('body'),
            $s = $('<style/>',{
                id: 'drag-queen-styles',
                type: 'text/css',
                html: '*{-webkit-user-select: none;}.dragqueen{-webkit-transform:translateZ(0)}'
            });
        
        $b.data('dragqueen', true);
        $s.appendTo('head');
        
        $b.on('mousedown.dragqueen', function(e){
            
            var $e = $(e.target),
                $p = $e.offsetParent(),
                pos = $e.css('position');
            
            if( pos == 'absolute' || pos == 'relative' || pos == 'fixed' ){
                
                $e.addClass('dragqueen');
            
                var mStart = {
                        x: e.pageX,
                        y: e.pageY
                    },
                    pStart = {
                        x: $p.offset().left,
                        y: $p.offset().top
                    },
                    eStart = {
                        x: $e.position().left,
                        y: $e.position().top
                    };
                
                $b.on('mousemove.dragqueen mouseup.dragqueen', function(e){
                    
                    if( e.type == 'mousemove' ){
                        
                        var eNew = {
                            x: eStart.x - ( mStart.x - e.pageX ),
                            y: eStart.y - ( mStart.y - e.pageY )
                        };
                        
                        $e.css({
                            top: eNew.y,
                            left: eNew.x
                        });
                        
                    }else{
                        
                        $b.off('mousemove.dragqueen mouseup.dragqueen');
                        $e.removeClass('dragqueen');
                        
                    }
                    
             ...