1

Using JQuery, I need to be able to press a button and create a draggable div. My code is as follows

I have the following style in the body

    <style>
        #draggable {
            width: 100px;
            height: 100px;
            background: #ccc;
        }
    </style>

This is the container where I want the div to be placed and the button that should create the new div. When I create the div on page load, it is draggable and works as expected. 

    <container id="area">
        <a class="btn btn-primary" id="create_block">Create</a>
        <div id="draggable">Draggable</div>
    </container>

I then have this script in the body that creates the draggable on button click and the code that, from what I understand, makes all things with id="draggable" a draggable.

    <script>
        $( "#create_block" ).click( function() {
            $( '<div/>' ).attr({
                'id' : 'draggable'
            }).appendTo("#area");
        });

        $( '#draggable' ).draggable();
    </script>

When I click the button, it creates a div that is styled correctly, but it is NOT draggable.

I'm not sure what's not working with this. I've looked at some different examples of similar things but it seems that this should work. What am I missing? I am using bootstrap, but no other frameworks.

How can I make a new div, and all others created by pressing the button, draggable?

Nic Barrett
  • 13
  • 5

2 Answers2

0

Example here http://jsfiddle.net/eb34jztf/

You need to initiate draggable to every newly created element, and please in future don't use same id values on one page :)

$("#create_block").click(function () {
$('<div/>').attr({
    'class': 'draggable'
}).draggable().appendTo("#area");
  //initiate draggable on every new created elements
});


//Don't need this part if the draggable elements are only created on click
$('.draggable').draggable(); // initiate the first draggable element that you already have
Bojan Petkovski
  • 6,835
  • 1
  • 25
  • 34
-1

While at first it seems unintuitive, your $( '#draggable' ).draggable() call is not doing what you think it's doing. This doesn't say "make all elements with an id of draggable draggable".

What it does is perform a selection to return all elements matching #draggable on the page. You then apply a method called draggable to each of those elements. At that point the execution is done. There is no listener operating on an ongoing basis.

When you create a new element you'll need to ensure it's also draggable if you want it to be. Something like this: (note the .draggable() chained to the creation of the new element)

 <script>
    $( "#create_block" ).click( function() {
        $( '<div/>' ).attr({
            'id' : 'draggable'
        }).appendTo("#area").draggable();
    });

    $( '#draggable' ).draggable();
</script>

Since that element didn't exist the first time you made it draggable it wasn't included the first go-around.

Also, somewhat unrelated but unless you're removing the first draggable div before adding the second you will want to choose a unique id for your elements (or set a class of draggable instead of an id). An id should be a unique identifier for an element on the page. You'll run into issues if there are multiple elements with the same id.

Brad Dwyer
  • 6,305
  • 8
  • 48
  • 68