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
Post a Comment