Note that there are some explanatory texts on larger screens.

plurals
  1. PONewly appended elements don't become draggable
    primarykey
    data
    text
    <p>I'm creating a simple form builder to play around with jQueryUI. I have a list of form elements, just as images, which I've made draggable, set to helper 'clone'. I also have a dropable area on which I've set the drop event to read the id of the dropped image and create an appropriate form element and append it to the droppable area. Once I've appended the new element I'm then setting it to be draggable. The problem is that despite the new elements having the class ui-draggable once draggable has been called on them they aren't draggable. I want to be able to drag them around once they have been created.</p> <p>Here's the code: -</p> <pre><code>var itemCount = 1; var idToAdd; var itemToAdd; $(document).ready(function(){ $(".draggable").draggable({ opacity:0.5, helper: "clone" }); $(".form_builder").droppable( { activeClass: "droppable_dragged", drop: function(e, ui){ var dropped_item = ui.draggable; switch($(dropped_item).attr("id")){ case "text_box": idToAdd = "textBox" + itemCount; itemToAdd = "&lt;input id='" + idToAdd + "' type='text' /&gt;"; break; case "text_area": break; case "radio": idToAdd = "radio" + itemCount; itemToAdd = "&lt;input id='" + idToAdd + "' type='radio' /&gt;"; break; case "check": idToAdd = "check" + itemCount; itemToAdd = "&lt;input id='" + idToAdd + "' type='check' /&gt;"; break; case "dropdown": break; case "file": idToAdd = "file" + itemCount; itemToAdd = "&lt;input id='" + idToAdd + "' type='file' /&gt;"; break; case "button": idToAdd = "button" + itemCount; itemToAdd = "&lt;input id='" + idToAdd + "' type='submit' /&gt;"; break; } itemCount++; $(this).append(itemToAdd); $("#" + idToAdd).draggable(); } }); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload