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


Comments

Post a Comment

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

Image
i have script tag in code, keyboard shortcut comment/uncomment script tag in sublime. after selecting script open , close tag. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script> i pressing ctrl + shift + / , getting this /*<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>*/ also pressed ctrl + / , got this // <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> // </script> instead of <!-- <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script> --> script open , close tag in 2 lines not in 1 line , not have spaces too. for mac,high light lines want comment. hold 'command , / ' commented. for windows: high line or select lines ,then hold ctrl + / if not work: ...
Read more

post - imageshack API cURL -

i credentials correct. when send image through form this:(action="http://api.imageshack.com/v2/images/"). working fine when tried send $ch = curl_init($url); failed. code: enter code here <form action="" method="post" enctype="multipart/form-data"> select image upload: <input type="file" name="file" id="file" multiple> <input type="text" name="auth_token" id="auth_token" value="xxxxxxxxxxxxxxxx"> <input type="text" name="api_key" id="api_key" value="xxxxxxxxxxxxxxx"> <input type="submit" value="upload image" > </form> $url = ' http://api.imageshack.com/v2/images/ '; $temp = $_files["file"]['tmp_name']; echo $temp."<br>" ; $ch = curl_init($url); curl_setopt($ch, curlopt_post, true); curl...
Read more

dataset - MPAndroidchart returning no chart Data available -

i having problems mpandroidchart. adding temperature , humidity data chart, displays "no chart data available". here can see bug is? super grateful! //create data //set size of data int size = list.size(); if (size > 24){ size = 24;} //create lists form temp , hum arraylist<entry> temps = new arraylist<entry>(); arraylist<entry> hums = new arraylist<entry>(); //fill list temp values (int = 0; < size; i++){ entry value = new entry(math.round(list.get(list.size()-size + i).temp), (size-i)); temps.add(value); } //fill list hum values (int = 0; < size; i++){ entry value = new entry(math.round(list.get(list.size()-size + i).hum), (size-i)); hums.add(value); } ...
Read more