CodePen

HTML

            
              <div><a href="http://codepen.io/swinggraphics/pen/cxmbj">Drag me</a></div>		
            
          
!
via HTML Inspector

CSS

            
              div {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  background: red;
  color: white;
  position: absolute;
  right: 50%;
  top: 20px;
}

a {
  color: white;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              (function($) {
	$.fn.draggable = function(opt) {
		opt = $.extend({
			target: '',
			cursor: 'move',
			offscreen: false
		}, opt);
		var $el = opt.target == '' ? this : this.find(opt.target);
		if(!$el.length) return this;
		var orig = {top: $el.position().top + 'px', left: $el.position().left + 'px'};
		return $el.css({cursor: opt.cursor, position: 'absolute', top: orig.top, left: orig.left, bottom: 'auto', right: 'auto'}).on('mousedown', function(e) {
			if(opt.target === '') {
				var $drag = $(this).addClass('draggable');
			} else {
				var $drag = $(this).addClass('active-target').parent().addClass('draggable');
			}
			var z_idx = $drag.css('z-index'),
				drg_h = $drag.outerHeight() ? $drag.outerHeight() : $drag.get(0).scrollHeight,
				drg_w = $drag.outerWidth() ? $drag.outerWidth() : $drag.get(0).scrollWidth,
				pos_y = $drag.offset().top + drg_h - e.pageY,
				pos_x = $drag.offset().left + drg_w - e.pageX,
				win_h = $(window).height(),
				win_w = $(window).width(),
				timeout;
			$drag.css('z-index', 1000).parents().on('mousemove', function(e) {
				$('.draggable').offset(function(i, pos){
					var drg_y = e.pageY + pos_y - drg_h,
						drg_x = e.pageX + pos_x - drg_w,
						y = drg_y > -1 ? drg_y : 0,
						x = drg_x > -1 ? drg_x : 0;
					clearTimeout(timeout);
					timeout = setTimeout(function(){$drag.trigger('mouseup');}, 800);
					if(!opt.offscreen) {
						if(y) y = (drg_y + drg_h) < win_h ? drg_y : win_h - drg_h;
						if(x) x = (drg_x + drg_w) < win_w ? drg_x : win_w - drg_w;
					}
					return {top: y, left: x};
				}).on('mouseup', function() {
					$(this).removeClass('draggable').css('z-index', z_idx);
				});
			});
			e.preventDefault(); // disable selection
			$(this).data('pos', {x: e.pageX, y: e.pageY});
		}).on('mouseup', function() {
			if(opt.target === '') {
				$(this).removeClass('draggable');
			} else {
				$(this).removeClass('active-target').parent().removeClass('draggable');
			}
		}).on('click', function(e){
			var pos = $(this).data('pos');
			if(Math.abs(e.pageX - pos.x) > 5 || Math.abs(e.pageY - pos.y) > 5)
				e.preventDefault();
		});
	}
})(jQuery);

$('div').draggable();
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................