$ drag bookmarklet

Add class .drag and .draghandle to anything to be able to drag the element around as a seperate window.

by Laurens Maneschijn

HTML

<div class="description">
	javascript bookmarklet to make anything dragable.<br>
	<ul>
		<li><code>.drag</code> : the element that you drag
		<li><code>.draghandle</code> : the element you click and drag to move the .drag element around.
	</ul>
</div>

<br>
Example dragable element below:<br>

<div class="drag">
	<div class="draghandle">
		&#10019; draghandle, dragging only starts here
	</div>
	<div>
		some other content<br>
		click dragging here selects text as usual but does not drag container around.
	</div>
</div>

<hr>

Drag to bookmarks: <a href="javascript:(function($){ if(!$ || !$.fn.on){return alert('missing $ or $.fn.on');} var log = (console && typeof console.log === 'function') ? console.log : function(){}; var drag = { dragging:false, dragtarget:null, dragstart_target_offset:null, dragstart_mouse_x:null, dragstart_mouse_y:null, z:0 }; function init(){ css(); $(document).off('.ev_drag'); $(document).on('dragstart.ev_drag mousedown.ev_drag ','.draghandle', DragStart ); $(document).on('dragend.ev_drag mouseup.ev_drag',DragStop); $(document).on('mousemove.ev_drag', DragMove); } function css(){ $('style#style_drag').remove(); var $s = $('<style>', {id:'style_drag'}); $s.appendTo( $('head,body').eq(0) ); $s.append('.drag.dragging { outline: 1px dashed #888; }'); $s.append('.draghandle { cursor: move; }'); $s.append('.draghandle:hover::before{ cursor: move; content: \'\\2194\\2195\'; position: absolute; top: 0; right: 0; background: #fff; color: #000; z-index: 999; line-height: 1; font-size: 14px; }'); } function DragStop(e){ $(drag.dragtarget).removeClass('dragging'); drag.dragging = false; drag.dragtarget = null; } function DragStart(e){ if(drag.dragging){ return; } e.preventDefault(); drag.dragging = true; drag.dragtarget = $(e.currentTarget).closest('.drag').get(0); if(!drag.dragtarget){ return; } drag.dragstart_target_offset = $(drag.dragtarget).offset(); drag.dragstart_target_offset.top -= $(window).scrollTop(); drag.dragstart_target_offset.left -=...

CSS

div {
	border: 1px solid #888;
	margin: 2px;
	padding: 2px;
}
ul,li{margin:0;}
ul {padding-left:1em;}

.drag {
	border: 1px solid #00f;
}
.draghandle {
	outline: 1px solid #0f0;
}
.dragged {
	background: rgba(255,255,255,0.8);
	resize: both;
	overflow: auto;
}

JavaScript

javascript:
(function($){
	if(!$ || !$.fn.on){return alert('missing $ or $.fn.on');}
	// drag any element (max one at a time)
	// .drag .draghandle
	// tip: to drag anything; inspect any element, then open console and do $($0).addClass('drag draghandle');
	// TODO: currently only supports position:fixed dragging; also allow position:relative and position:absolute dragging?
	// TODO: prevent text selection when dragging. especially if the draghandle has text in it.
	// TODO: prevent odd things happening when dragging from draghandle that is/has a link in it (holding ALT helps with this).

	var log = (console && typeof console.log === 'function') ? console.log : function(){};
	var drag = {
		dragging:false,
		dragtarget:null,
//		dragstart_target_position:null,
		dragstart_target_offset:null,
//		dragstart_target_topleft:null,
		dragstart_mouse_x:null,
		dragstart_mouse_y:null,
		z:0
	};

	function init(){
		css();
		$(document).off('.ev_drag');
		$(document).on('dragstart.ev_drag mousedown.ev_drag ','.draghandle', DragStart );
		$(document).on('dragend.ev_drag mouseup.ev_drag',DragStop);
		$(document).on('mousemove.ev_drag', DragMove);
	}
	function css(){
		$('style#style_drag').remove();
		var $s = $('<style>', {id:'style_drag'});
		$s.appendTo( $('head,body').eq(0) );
		$s.append('.drag.dragging { outline: 1px dashed #888; }');
		$s.append('.draghandle { cursor: move; }');
		// TODO: make this optional? could be in the way of something you want to click on (e.g. closing cross or similar in top right)
		// add a very tiny drag handle; also helps against selecting text when dragging and odd behaviour when starting dragging above a link:
		// \2194 leftright arrow and \2195 updown arrow. havent found the character equivalent of the cursor:move icon yet.
		$s.append('.draghandle:hover::before{ cursor: move; content: \'\\2194\\2195\'; position: absolute; top: 0; right: 0; background: #fff; color: #000; z-index: 999; line-height: 1; font-size: 14px; }');
	}

	function...