Search code examples
javascriptjquerydraggable

Add an element to page. Than drag it

I'm adding an element on a page but i can't drag it. Can anyone help me out with this.This is my code:

Html

<div class="mainDiv">
    <ul>
      <li>
        <input type="button" value="clickme" id="clickme">
      </li>
    </ul>
</div>

Css

#dragme {
  height: 100px;
  width: 100px;
  background-color: red;
  cursor: pointer;
}

And JavaScript with jQuery

 $("#clickme").click(function() {
    $(".mainDiv").append("<div id='dragme'>Drag me</div>");
  });

  $("#dragme").draggable();

Demo Here

Solution

  • Firstly, $.draggable is a method from jQuery UI package, so if you want to use it, you will have to include it.

    Secondly, when you call $("#dragme").draggable(), the element is not added to the DOM yet and therefore $("#dragme") will return nothing. You will have to call this function after you add the #dragme element in the page.

    Here is a working update of your code:

    https://jsfiddle.net/tpdx1e83/1/