javascript - Jquery Create Dynmica draggable elements by value in input field -


i trying use jquery dynamically create set of draggable div's contain input fields numeric label , option edit label.

the user enter number of div's want , hit create. dont want div's appear on page load, instead want user request amount of div's" , button creates them.

i can create div's dynamically lose ability drag. want remove div's on page load. should appear after user submits request.

check out have far:

http://jsfiddle.net/jdarville/kocwtg0b/

 # <input type="text" id="num" name="more" value=''>  <button type="button" id="more" name="more">create</button  <br>  <br>  <div class="container" id="inputcontainer"> <div class="bl blue draggable"><input type="text" /></div> <div class="bl coral draggable"><input type="text" /></div> <div class="bl pink draggable"><input type="text" /></div>  </div>   <script>  $(document).ready(function () {  $('.container').on('click', '.pink', function () {     $("<div class='bl pink'></div>").appendto('.container').draggable(); });  $('.container').on('click', '.blue', function () {     $("<div class='bl blue'></div>").appendto('.container').draggable(); }); $('.container').on('click', '.coral', function () {     $("<div class='bl coral'></div>").appendto('.container').draggable(); });  $(".draggable").draggable();    });   function createmore(){ var num = $('#num').val(); for( var = 0; < num; i++ ) {     $("#inputcontainer").append("<div class='bl blue draggable'></div>");  }  }  $("#more").click(".add",createmore);  </script>   <style> html, body { margin:0px; padding:0px; width:auto; height:auto; } .container { margin:20px; } .bl { width:200px; height:200px; border-radius:10px; display:block; margin:5px; float:left; } .pink { background-color:#d91c5c; } .blue { background-color:#00adee; } .coral { background-color:#ee4036; } </style> 


Comments

Popular posts from this blog

1111. appearing after print sequence - php -

java - WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/board/] in DispatcherServlet with name 'appServlet' -

Ruby on Rails, ActiveRecord, Postgres, UTF-8 and ASCII-8BIT encodings -