Drag and Drop between different tables using jquery? -
i not able drag , drop images 'table a' 'table b'. using sortable api dragging , dropping, problem 1 time dropped 'table a' 'table b' cannot drag , drop 'table a' table b'. can please help? here sample code...
$( "tbody.table1" ).sortable({ connectwith: ".table1a", items: "> tr td", appendto: table2, helper:"clone", start: function(){ $table1b.addclass("dragging") }, stop: function(){ $table1a.removeclass("dragging") } }) .disableselection(); $( ".table1a",".table1b" ).droppable({ accept: ".table1b tr td" }, drop: function( event, ui ) { homecoming false; } });
below sample code demonstrating drag , drop between 2 lists:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>demo</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script type="text/javascript"> $(function () { $(".list1, .list2").sortable({ connectwith: ".sortable" }); }); </script> <style> .sortable { list-style-type: none; list-style-position: inside;margin: 0px 12px 8px 0px; width: 60%; padding: 2px; border-width: 1px; border-style: solid; min-height: 100px;} .sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1em; height: 18px; border: 2px dashed #d3d3d3 ; background-color: #eee } </style> <div> <div"> <ul class="list1 sortable"> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> </ul> </div> <div> <ul class="list2 sortable"> <li>item 6</li> <li>item 7</li> <li>item 8</li> <li>item 9</li> <li>item 10</li> </ul> </div> </div> </body> </html> hope help sort out issue.
click here check code implemented in jsfiddle.
jquery jquery-ui
No comments:
Post a Comment