Drag Dynamic Divs

by Edgar Martinez

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Move Dynamically Appended DIV</title>
<script src="http://threedubmedia.com/inc/js/jquery-1.7.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag.live-2.2.js"></script>
</head>
<body>
	<button id="divgen">Gen Div</button>
  
	<div class="container">
		<div class="drag" style="left:20px;"></div>
	</div>
</body>
</html>

CSS

.drag {
	position: absolute;
	border: 1px solid #89B;
	background: #BCE;
	height: 58px;
	width: 58px;
	cursor: move;
	top: 120px;
}

JavaScript

jQuery(function($){
	$('.container').on('drag','.drag',(function( ev, dd ){
		$( this ).css({
			left: dd.offsetX
		});
	}));
  
	$("#divgen").click(function() {
		$("div.container").append('<div id="whatever" class="drag">my div</div>');
	});
});