html - How to make the objects stay after dropping to another column -
i have drag , drop functionality on html page. once drag box 1 column another, want box stay in new column user. so, if user signs in back, should see box in new column.
here html code:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head> <meta name="description" content="drag , drop table content javascript"/> <meta name="viewport" content="width=device-width, user-scalable=no"/><!-- "position: fixed" fix android 2.2+ --> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <link rel='stylesheet' href='/stylesheets/bootstrap-theme.css' /> <link rel='stylesheet' href='/stylesheets/bootstrap-theme.min.css' /> <link rel='stylesheet' href='/stylesheets/bootstrap.css' /> <link rel='stylesheet' href='/stylesheets/bootstrap.min.css' /> <link rel='stylesheet' href='/stylesheets/style.css' /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="/stylesheets/bootstrap.min.js"></script> <script type="text/javascript" src="/stylesheets/script.js"></script> <script type="text/javascript" src="/stylesheets/redips-drag-min.js"></script> <script type="text/javascript" src="/stylesheets/redips-drag-source.js"></script> <title>kanban model</title> </head> <body style="overflow-x:hidden"> <!--header--> <div id = "header"> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/kanbannew">welcome</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#" data-toggle="modal" data-target="#mymodal" data-whatever="add card">add card</a></li> <li><a href="kanbanprojectstatus">project status</a></li> <li><a href="index">logout</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> </div> <div class = "container" <!-- tables inside div have draggable content --> <div id="redips-drag" style="padding-left: 100px;padding-top: 100px;width: 988px;"> <table id="table1" style="width: 950px; padding-bottom: 50px;"> <colgroup><col width="100"/><col width="100"/><col width="100"/><col width="100"/><col width="100"/></colgroup> <tr> <td class="redips-mark" style="text-align: center;">new requests</td> <td class="redips-mark" style="text-align: center;">ready start</td> <td class="redips-mark" style="text-align: center;">in progress</td> <td class="redips-mark" style="text-align: center;">ready review</td> <td class="redips-mark" style="text-align: center;">recently finished</td> </tr> <tr style="background-color: #eee"> <td style="padding-right: 12px; padding-left: 12px;"></td> <td style="padding-right: 12px; padding-left: 12px;"> <div id="d1" class="redips-drag t1" style="background-color: burlywood;height: 106px;">login functionality</div> <div id="d2" class="redips-drag t1" style="background-color: burlywood;height: 106px;">welcome page</div> <div id="d3" class="redips-drag t1" style="background-color: burlywood;height: 106px;">search functionality</div> </td> <td style="padding-right: 12px; padding-left: 12px;"></td> <td style="padding-right: 12px; padding-left: 12px;"></td> <td style="padding-right: 12px; padding-left: 12px;"> <div id="d4" class="redips-drag t1" style="background-color: burlywood;height: 106px;">search results page</div> </td> </tr> </table> <table id="table3"> <colgroup><col width="100"/><col width="100"/><col width="100"/><col width="100"/><col width="100"/></colgroup> <tr style="background-color: #eee"> <td id="message" class="redips-mark" title="you can not drop here"></td> </tr> <tr style="background-color: #eee"> <td class="redips-trash" title="trash" ></td> </tr> </table> <div><input type="hidden" class="checkbox" onclick="toggledragging(this)" title="enable dragging" checked="true"/><span class="message_line"></span></div> </div> </div> <!--footer--> <div class="navbar navbar-default navbar-fixed-bottom"> <div class="container"> </div> <!-- container--> </div> <!-- navbar navbar-default navbar-fixed-bottom" --> <!-- modal --> <div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">modal title</h4> </div> <div class="modal-body"> <p>one fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> <button type="button" class="btn btn-primary">save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <script> $('#mymodal').on('show.bs.modal', function (event) { var li = $(event.relatedtarget) // button triggered modal var recipient = li.data('whatever') // extract info data-* attributes var modal = $(this) modal.find('.modal-title').text(recipient) }) </script> </body> </html> any appreciated. thanks.
Comments
Post a Comment