javascript - Jquery ui Drag/Drop and Sortable -
i have 2 div
containers
top_div
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
Post a Comment