svg draggable

by hajime_nagahata

HTML

<svg id="parent" width="400" height="180">
  <rect id="draggable" class="pow" x="50" y="20" rx="20" ry="20" width="150" height="40" />
  Sorry, your browser does not support inline SVG.
</svg>
<div>
  Width: <input type="text" id="width" value="150"> Height: <input type="text" id="height" value="40">
</div>

CSS

svg {
  position: relative;
}
.pow {
fill: white;
position: absolute;
opacity: 0.5;
stroke:black;
stroke-width:1;
}
.pow:hover {
fill: #CCF;
cursor: pointer;
}

JavaScript

$(function() {
	var diff = {top:0,left:0};
  var strokeWidth = 1;
  var $d = $('#draggable');
  var $p = $('#parent');

  var $w = $('#width');
  var $h = $('#height');
  
  $w.add($h).on('keyup', function(){
  	var w = 1*$w.val();
  	var h = 1*$h.val();
    var r = (w > h ? h : w) / 2;
  	$d.attr({
    	'width': w,
    	'height': h,
      'rx': r,
      'ry': r
    });
  })
  
  $( "#draggable" ).draggable({
  	start: function(e,ui){      
      diff.top = ui.originalPosition.top - $d.attr('y');
      diff.left = ui.originalPosition.left - $d.attr('x');
    },
  	drag: function(e,ui) {
    	var maxX = $p.attr('width') - $d.attr('width') - strokeWidth;
    	var maxY = $p.attr('height') - $d.attr('height') - strokeWidth;
      var zeroX = 0+strokeWidth;
      var zeroY = 0+strokeWidth;

    	var x = ui.originalPosition.left - diff.left + ui.position.left - ui.originalPosition.left;
      x = x > maxX ? maxX : x < zeroX ? zeroX : x;
    	var y = ui.originalPosition.top - diff.top + ui.position.top - ui.originalPosition.top;
      y = y > maxY ? maxY : y < zeroY ? zeroY : y;
    
			$d.attr('x', x);
			$d.attr('y', y);
      
      console.log('x:'+$d.attr('x')+' y:'+$d.attr('y'))
    }
  });
});