javascript - Jquery ui Drag/Drop and Sortable -


i have 2 div containers

  1. top_div
  2. bottom_div

initially top_div blank. i'm using jquery ui drag , drop. i'm able drag contents bottom_div top_div.

my requirement in above top_div need sort (using sortable jquery ui) contents. , after sorting when refresh page should not change position.

please appreciated thanks!

html code

<div id="top_div">  </div> <br/> <div id="bottom_div">     <ul>         <li class="ui-state-default">sachin tendulkar</li>         <li class="ui-state-default">ab de villiers</li>         <li class="ui-state-default">ms dhoni</li>         <li class="ui-state-default">ricky ponting</li>         <li class="ui-state-default">rahul</li>     </ul> </div> 

jquery code

<script type="text/javascript">     $(function ()      {         $("#bottom_div li").draggable({             tolerance:'fit',             revert: "invalid",             refreshpositions: true,             drag: function (event, ui)              {                 ui.helper.addclass("draggable");             },             stop: function (event, ui)              {                 ui.helper.removeclass("draggable");             }         });         $("#top_div").droppable(         {             drop: function (event, ui)              {                 if ($("#top_div li").length == 0)                  {                     $("#top_div").html("");                 }                 ui.draggable.addclass("dropped");                 $("#top_div").append(ui.draggable).sortable();             }         });     }); </script> 


Comments

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -