ajax - Drag and drop is not working using correctly using jquery -
i doing stuff using jquery. want drag element id draggable in id drop.
at time of drop want append div divs class droppable2. case drag drop elements in same page working fine. requirement drag element in index.php , drop element in data.php. in situation dragging working, div appending not working.
i have pages: index.php, ajaximage.php, , data.php. don't include code ajaximage.php , data.php pages here, php code. work upload excel databse , display it.
index.php
<script type="text/javascript" src="scripts/jquery.min.js"></script> <script type="text/javascript" src="scripts/jquery.form.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> <script type="text/javascript" > $(document).ready(function () { $('#photoimg').live('change', function () { //$("#preview").css("height","auto"); $("#imageform2").ajaxform({ target: '#preview' }).submit(); }); }); function show() { var main_width = $("#main_width").val(); var main_height = $("#main_height").val(); if (main_width == "") { alert("enter main sheet width"); return false; $('#main_width').focus(); } if (isnan(main_width)) { alert("given value not number"); document.getelementbyid('main_width').focus(); return false; } if (main_height == "") { alert("enter main sheet height"); return false; $('#main_height').focus(); } if (isnan(main_height)) { alert("given value not number"); document.getelementbyid('main_height').focus(); return false; } $("#preview").css({"border": "1px solid #cccccc", "margin": "auto", "width": main_width + "px", "height": main_height + "px"}); $("#main_tab").hide(); $("#imageform").show(); $("#pagination").show(); } $(function () { $("#draggable").draggable(); $("#drop").droppable({ drop: function (event, ui) { alert("jjjj"); $(".droppable2").append("<div id='draggable'>dd</div>") } }); }); </script> <body> <div > <div style="margin-left:431px;"> <form method="post" id="imageform2" enctype="multipart/form-data" action='ajaximage.php' > <table id="main_tab" > <tr> <td>main sheet width</td> <td><input name="main_width" type="text" id="main_width"></td> </tr> <tr> <td>main sheet height</td> <td><input name="main_height" type="text" id="main_height"></td> </tr> <tr> <td></td> <td> <input name="" type="button" value="set" onclick="show()"></td> </tr> </table> <table style="margin-left:38px;display:none;" id="imageform"> <tr><td>width of cell </td><td> <input name="width" type="text"> %</td></tr> <tr><td>height of cell</td><td> <input name="height" type="text"> %</td></tr> <tr><td>upload file</td><td> <input type="file" name="photoimg" id="photoimg" /></td></tr> </table> </form> </div> <div id="draggable" >dd</div> <div id='preview'></div> <ul id="pagination" style="display:none;"></ul> <div id="loading" ></div> </div> </body> </html> ajaximage.php
<script type="text/javascript" src="scripts/jquery.min.js"></script> <script type="text/javascript" > $(document).ready(function () { var page = 1; $.ajax({ type: "get", url: 'data.php', data: 'page=' + page, success: function (msg) { $("#preview").html(msg); } }); }); </script> data.php
<div id="drop"></div> <div class="droppable2"></div> <div class="droppable2"></div> any body give solution these issue?
as loading data.php via ajax, after should define droppable after call ready:
in ajaximage.php:
$(document).ready(function () { var page = 1; $.ajax({ type: "get", url: 'data.php', data: 'page=' + page, success: function (msg) { $("#preview").html(msg); $("#drop").droppable({ drop: function (event, ui) { alert("jjjj"); $(".droppable2").append("<div id='draggable'>dd</div>") } }); } }); }); 
Comments
Post a Comment