asp.net mvc - Transfer item back to list using jquery drag drop -
following code transferring item left list right list. able no issues. how can transfer added list item left hand side list.
<style> .ui-drop-hover { border: 2px solid #bbb; } #dragdiv { width: 180px; height: 200px; float: left; } #dropdiv { width: 280px; height: 150px; float: right; margin-right: 10px; background-color: #f9f887; } #dropdiv li { padding-left: 10px; } #maindiv { width: 580px; height: 300px; border: 2px solid #bbb; } </style> <script type="text/javascript"> $(function () { $("#dragdiv li").draggable( { appendto: "body", helper: "clone", cursor: "move", revert: "invalid" }); initdroppable($("#dropdiv")); function initdroppable($elements) { var cnt = 1; $elements.droppable({ activeclass: "ui-state-default", hoverclass: "ui-drop-hover", accept: ":not(.ui-sortable-helper)", over: function (event, ui) { var $this = $(this); }, drop: function (event, ui) { var $this = $(this); $("<li id=" + cnt++ + "></li>").text(ui.draggable.text()).appendto(this); $("#allitems").find(":contains('" + ui.draggable.text() + "')")[0].remove(); } }); } }); </script> <h2>dragdrop</h2> <div class="container"> <h1 class="page-header">actions</h1> <div class="reset-password-container"> <a href="#"></a> <div class="panel-wrapper"> <div id="maindiv"> <div id="dragdiv"> <ul id="allitems"> <li id="node1">item a</li> <li id="node2">item b</li> <li id="node3">item c</li> <li id="node4">item d</li> <li id="node5">item e</li> </ul> </div> <div id="dropdiv"> </div> </div> </div> </div> </div>
you can copy code , run it. please how can add original position.
Comments
Post a Comment