fpauser/jsbin.fadaj.html

## 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>