jQuery plug in: drag & drop, resize in an event delegation fashion

Only the parent element is handling events. In this case it's the editor container element. If you add dynamicaly elements into the container you don't have to bind any events on it.

Take a look at the blog post.

Download the plug in.

<script type="text/javascript">
$(document).ready( function() {
    $('#editor').dragResize({grid:20});
});
</script>
d
r

<div class="block snap-to-grid" style='width: 300px; height: 200px; top: 200px; left: 50px;'>

d
r

<div class="block" style='width: 200px; height: 120px; top: 100px; left: 40px;'>

d
r

<div class="block snap-to-grid" style='width: 300px; height: 200px; top: 60px; left: 400px;'>

<div class="block" style='width: 100px; height: 100px; top: 200px; left: 600px;'>