Adding divs inside an element through a button click

Question

I have a draggable div(using jqueryui plugin for this) inside a table. I am able to drag a single div and keep it contained inside <td id=” middle-side”></td>. Now I am having issues trying to create additional divs that will be also be draggable and contained inside the <td id=” middle-side”></td>. The button I am using to append this new div is not reacting to the click. How would I be able to add new dragagble divs to <td id=” middle-side”></td>? JSFIDDLE

Html

<td class="middle-side">
                Keep me inside here!
                    <div class="draggable" class="ui-widget-content">
                        <p><b>Drag me around</b></p>
                    </div>

            </td>

Jquery

//To Drag
$(function() {
     $( ".draggable" ).draggable({ containment: "parent" });
});


//To Add New Div
var i = 0;
var remove = true; // added this 
$('#button').click(function(e) {
    $('<div/>').attr({
        'id' : i
    }).addClass('draggale').css({
        'top' : e.pageY - 20,
        'left' : e.pageX - 20
    }).appendTo('.middle-side');
    i++;
});

$('.middle-side').on('click','.draggable',function (){ // corrected spelling
    if(remove){
        $(this).remove();
    } else {
        //just to see if it was clicked
        $(this).css({'background-color': 'red'});
    }
});

bazeblackwood · Accepted Answer · 2014-08-27 17:20:13Z

1

You could store the div as a template in your .click function:

$('#button').click(function(e) {
    $('<div class="draggable" class="ui-widget-content"><p><b>Drag me around</b></p></div>').draggable({ containment: "parent" }).appendTo('.middle-side');
});

Updated fiddle: http://jsfiddle.net/0wbnud4k/3/

answered Aug 27, 2014 at 17:20

bazeblackwood

1,2047 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jorge Silva · Accepted Answer · 2014-08-27 17:22:19Z

1

You have two errors in your code:

You misspelled draggable
You didn't re-bind all your .draggable divs

Here's the new code:

$('<div/>').attr({
        'id' : i
    }).addClass('draggable').css({ // Change CSS class
        'top' : e.pageY - 20,
        'left' : e.pageX - 20
    }).appendTo('.middle-side');
// Re-bind all your draggable divs
$( ".draggable" ).draggable({ containment: "parent" });

See Fidddle: http://jsfiddle.net/thejsj/0wbnud4k/7/

answered Aug 27, 2014 at 17:22

Jorge Silva

4,6342 gold badges26 silver badges44 bronze badges

Comments

Vinc199789 · Accepted Answer · 2014-08-27 17:20:57Z

0

try this:

$('#button').click(function(){
  $('.middle-side').append('<div class="draggable ui-widget-content"><p>text</p></div');
})

answered Aug 27, 2014 at 17:20

Vinc199789

1,0461 gold badge11 silver badges32 bronze badges

Comments

dezman · Accepted Answer · 2014-08-27 17:21:04Z

You misspelled draggable in one place, and also you have to re-initialize the draggable content after you add more of them.

Fiddle

$(function() {
     $( ".draggable" ).draggable({ containment: "parent" });
});

var i = 0;
var remove = true; // added this 

$('#button').click(function(e) {
    $('<div/>').attr({
        'id' : i
    }).addClass('draggable').css({
        'top' : e.pageY - 20,
        'left' : e.pageX - 20
    }).appendTo('.middle-side');
    i++;
    $( ".draggable" ).draggable({ containment: "parent" });
});

$('.middle-side').on('click','.draggable',function (){ // corrected spelling
    if(remove){
        $(this).remove();
    } else {
        //just to see if it was clicked
        $(this).css({'background-color': 'red'});
    }
});

Yonatan Naor · Accepted Answer · 2014-08-27 17:23:25Z

0

First you have a typo in .addClass('draggale'), it should be .addClass('draggable')

Second you also have to call .draggable() on the new DIV to make it draggable

Here is an updated fiddle

answered Aug 27, 2014 at 17:23

Yonatan Naor

1,57521 silver badges20 bronze badges

Collectives™ on Stack Overflow

Adding divs inside an element through a button click

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related