Question

i am using a jquery plugin to create some draggable objects.

the plugin is here and demos are here.

Also my testing with jsfiddle is here

The script begins with this:

$('.drag')
    .live("click", function(){
        $( this ).toggleClass("selected");
    })
    .drag("init",function(){
        if ( $( this ).is('.selected') )
            return $('.selected');                      
    })
    .drag("start",function( ev, dd ){
        dd.attr = $( ev.target ).attr("className");
        dd.width = $( this ).width();
        dd.height = $( this ).height();
        dd.limit = $div.offset();
        dd.limit.bottom = dd.limit.top + $div.outerHeight() - $( this ).outerHeight();
        dd.limit.right = dd.limit.left + $div.outerWidth() - $( this ).outerWidth();
    })
    .drag(function( ev, dd ){
        var props = {};
        if ( dd.attr.indexOf("E") > -1 ){
            props.width = Math.round(Math.max( 32, dd.width + dd.deltaX )/ 20 ) * 20;
        }
        if ( dd.attr.indexOf("S") > -1 ){
            props.height = Math.round(Math.max( 32, dd.height + dd.deltaY )/ 20 ) * 20;
        }
        if ( dd.attr.indexOf("drag") > -1 ){
            props.top = Math.round(Math.min( dd.limit.bottom, Math.max( dd.limit.top, dd.offsetY ) )/ 20 ) * 20;
            props.left = Math.round(Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) )/ 20 ) * 20;
        }
        $( this ).css( props );
});

it might look complicated but but all it does is makes some draggable divs hor this htnl:

<input type="button" id="add" value="Add a Box" />
<div class="test" id="container">


<div class="drag" style="left:100px;">
    <div class="handle SE"></div>
</div>
<div class="drag" style="left:180px;">
    <div class="handle SE"></div>
</div>

</div>

then i use a button to add some more vids:

var $div = $('#container');
var num = 1;
    $('#add').click(function(){
        $('<div class="handle SE"><div class="drag" style="left:20px;"/>')
            .text( num++ )
            .appendTo( document.body )
            .wrap('<div class="drag" style="left:20px;"/>');
    });

And the problem i have is that the newly created divs to dot inherit the already existing settings.

If i add separate code it will work with that:

$('.drag').live("drag",function( ev, dd ){
        $( this ).css({
           top:  Math.round(dd.offsetY / 20 ) * 20,
           left:  Math.round(dd.offsetX / 20 ) * 20
        });
});

but i want the newly created blocks to use the first script. So i guess the problems is that the settings are not inherited

Any ideas?
Thanks

Answer 1

You have to specifically add the script on a newly created element, or it won’t apply. Put the drag script initialization in a separate function, and call it on the new div element:

$('#add').click(function(){
        var newDiv = $('<div class="handle SE"><div class="drag" style="left:20px;"/>')
            .text( num++ )
            .appendTo( document.body )
            .wrap('<div class="drag" style="left:20px;"/>');
          initDrag(newDiv);
    });