CODEWITHSUNDEEP
jqueryjquery-ui
Krishan Gopal
Krishan Gopal

Reputation: 57

how to drag element in generated dynamic tab

jQuery Drag and Drop codes:

jQuery(function() {
 jQuery(".component").draggable({
//  use a helper-clone that is append to 'body' so is not 'contained' by a pane
helper: function() {
    return jQuery(this).clone().appendTo('body').css({
        'zIndex': 5
    });
},
cursor: 'move',
containment: "document"

});

jQuery('.drag-drop-box').droppable({
accept: '.component',
drop: function(event, ui) {
    if (!ui.draggable.hasClass("dropped"))
        jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable());
    }
   });
});

This code works fine on a pre-loaded div. But when I am creating dynamic tabs it is not working. How can I drag in dynamic tab.

This is HTML code of the static code where dropping elements is working well

<div class="item-box">
    <div id="tabs-1">
        <div class="drag-drop-box"> </div>
    </div>
</div>

This is css codes:

.drag-drop-box {
    max-width: 780px;
overflow:scroll;
position:relative;
    height: 540px;
    border: 3px dashed #F7941D;
-moz-border-radius: 10px;/*Firefox*/
-webkit-border-radius: 10px;/*Safari, Chrome*/
border-radius: 10px;
overflow:hidden;
margin:0 auto;
}

And here is the jQuery code that's creating divs dynamically:

function addTab() {
var label = tabTitle.val() || "Tab " + tabCounter,
id = "tabs-" + tabCounter,
li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label) ),
tabContentHtml = tabContent.val();// || "Tab " + tabCounter + " content.";

 tabs.find( ".ui-tabs-nav" ).append( li );
 tabs.append( "<div id='" + id + "'><div class='drag-drop-box'></div></div>" );
 tabs.tabs( "refresh" );
 tabCounter++;
}

Upvotes: 1

Views: 533

Answers (1)

Sridhar R
Sridhar R

Reputation: 20408

New element you created dynamically had not been picked up by the droppable function because it is created after you call that function. So what you need to do is calling the jQuery droppable function each time after you add the tab(at the end of function addTab()). 

function addTab() {

 //Your codes

jQuery('.drag-drop-box').droppable({
accept: '.component',
drop: function(event, ui) {
    if (!ui.draggable.hasClass("dropped"))
        jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable());
    }
   });
}

Upvotes: 1

Related Questions