html - jQuery UI - append a class, make it draggable -

hello!

i started jquery ui, i'm stuck something...

i'm trying make web program allows user make floor plan. has drag & drop function.

---

it has menu several items can dragged around. problem is, when it's dragged around, item in menu disappears (because it's dragged around). tried fix using code:

jquery:

$('.notactive').draggable({ //.notactive item in menu     stop: function(){         $(this).removeclass('notactive');          $(this).addclass('active'); //make active item         $('#menu').append($('<div class="item notactive">furniture</div>'));         //this creates new item in menu     } }); 

each item has class .notactive because it's not dragged. when it's being dragged user removes class , receives class .active. when it's dragged creates new element inside #menu class .notactive. problem is, new created (appended(?)) item in menu not .draggable(), though has class .notactive.

why this? how can create new instance .draggable()?

apologies grammar mistakes, i'm dutch.

edit

here's fiddle: https://jsfiddle.net/8tpy7x3e/

you're not explicitly calling draggable on new item that's added menu.

something work:

$('.notactive').draggable({ //.notactive item in menu   stop: function(){     $(this).removeclass('notactive');      $(this).addclass('active'); //make active item     //create new object     var newitem = $('<div class="item notactive">furniture</div>');     //make new item "draggable" , add menu     newitem.draggable();     $('#menu').append(newitem);     //this creates new item in menu   } }); 

fiddle example