fpauser · April 14, 2014 21:00
diff --git a/jsbin.fadaj.html b/jsbin.fadaj.html
 <!DOCTYPE html>
 <html>
 <head>
 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    #app {
      width:300px;
      height:300px;
      background:#eaeded;
      padding:50px;
    }
    
    #fake-svg {
      position:absolute;
      width:200px;
      padding:10px;
      background:#aaa;
    }
    
    .drag-helper {
      position:absolute;
      background-color:#00aaff!important;
      opacity:0.6;
    }
  </style>
  <script>
    function doIt() {
      $("#fake-svg").draggable({
        axis: "x",
        
        helper: function() {
          var $this = $(this),
              $handle = $("<div class='drag-helper'>");
          
          $handle.css({
            width: $this.outerWidth(),
            height: $this.outerHeight(),
            top: $this.position().top
          });
          
          return $handle;
        },
      
        drag: function(e, ui) {
          var $elm = $(e.target),
              offset = $elm.offset(),
              diff = ui.offset.left - offset.left;
          
          $elm.css({top: ui.originalPosition.top + diff});
        }
      });
    }
    
    $(doIt);
  </script>
 </head>
 <body>
    <div id="app">
      <div id="fake-svg">
        FAKE SVG
      </div>
    </div>
  
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style>
	#app {
	width:300px;
	height:300px;
	background:#eaeded;
	padding:50px;
	}

	#fake-svg {
	position:absolute;
	width:200px;
	padding:10px;
	background:#aaa;
	}

	.drag-helper {
	position:absolute;
	background-color:#00aaff!important;
	opacity:0.6;
	}
	</style>
	<script>
	function doIt() {
	$("#fake-svg").draggable({
	axis: "x",

	helper: function() {
	var $this = $(this),
	$handle = $("<div class='drag-helper'>");

	$handle.css({
	width: $this.outerWidth(),
	height: $this.outerHeight(),
	top: $this.position().top
	});

	return $handle;
	},

	drag: function(e, ui) {
	var $elm = $(e.target),
	offset = $elm.offset(),
	diff = ui.offset.left - offset.left;

	$elm.css({top: ui.originalPosition.top + diff});
	}
	});
	}

	$(doIt);
	</script>
	</head>
	<body>
	<div id="app">
	<div id="fake-svg">
	FAKE SVG
	</div>
	</div>

	</body>
	</html>