html - Jquery Drag Drop Sort from List to Table Cell not working -
i have sortable list , drop list items in table cell, , table cell sort items in cell.
first step drag list item tblcell. second step sort list item in table(2 column) list items in cell can sorted , not fixed numbers in first column of table. third step return cell item list.
<html> <head> <meta charset="utf-8"> <title>untitled document</title> <script src="jquery-1.11.3.min.js" ></script> <script src="jquery-ui.js"></script> <style> #sortable1 { border: 1px solid #ccc; width: 220px; min-height: 20px; list-style-type: none; margin: 0; padding: 2px 0 0 0; float: left; margin-right: 5px; font-size:10px; } #sortable1 li { margin: 0 5px 5px 5px; padding: 2px; font-size: 1.2em; width: 200px; } </style> </head> <body> <script> $(function() { $("#sortable1,.tblsort").sortable({ items: 'td', cursor: 'pointer', connectwith: '.tblsort', axis: 'y', droponempty: true, receive: function(e, ui){ $(this).find("tbody").append(ui.item); } }); }); </script> <ul id="sortable1" class="connectedsortable" style="cursor:pointer;"> <li class="ui-state-default">suburb</li> <li class="ui-state-default">city</li> <li class="ui-state-default">province</li> </ul> <table width="300" border="0" cellspacing="0" cellpadding="0" class="tblsort"> <tbody> <tr> <td>1</td> <td> </td> </tr> <tr> <td>2</td> <td> </td> </tr> <tr> <td>3</td> <td> </td> </tr> </tbody> </table> </body> </html>
sorting table cells jqueryui has no sense, because breaks table layout. sorting table rows may work , not destructive.
since need drag , drop elements, need use appropriate jqueryui widgets draggable , droppable.
in eyes looks bad solution , rather use buttons exchange data between list , table. bad because can see bugs in firefox , hard drag table, avoid table rows sorting. if have use dragging, here 1 solution:
$(function() { $("#draggable").draggable({ revert: true, revertduration: 0 }); $("#draggable").droppable({ drop: function(event, ui) { var table = $(this); $(ui.draggable).find('td:nth-child(2n)').each(function(i) { table.find('li:eq(' + + ')').text($(this).text()); }) } }); $(".tblsort").droppable({ drop: function(event, ui) { var table = $(this); $(ui.draggable).find('li').each(function(i) { table.find('td:nth-child(2n):eq(' + + ')').text($(this).text()); }) } }); $(".tblsort tbody").sortable({ helper: function(e, ui) { ui.children().each(function() { $(this).width($(this).width()); }); return ui; }, update: function(event, ui) { $(this).find('td:nth-child(2n+1)').each(function(i) { $(this).text(i + 1); }); } }); $(".tblsort").draggable({ revert: true, revertduration: 0 }); }); * { box-sizing: border-box; font-family: sans-serif; } #draggable { border: 1px solid #ccc; width: 220px; list-style-type: none; margin: 0; padding: 0; float: left; margin-bottom: 20px; } #draggable li { margin: 10px; padding: 2px 5px; } .tblsort { border: 1px solid #ccc; border-spacing: 10px; border-collapse: separate; clear: both; cursor: grab } .tblsort td { border: 1px solid #ccc; padding: 2px 5px; cursor: ns-resize } .tblsort td:nth-child(1) { width: 30px; }<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <ul id="draggable" class="connectedsortable" style="cursor:pointer;"> <li class="ui-state-default">suburb</li> <li class="ui-state-default">city</li> <li class="ui-state-default">province</li> </ul> <table width="300" border="0" cellspacing="0" cellpadding="0" class="tblsort"> <tbody> <tr> <td>1</td> <td>aa</td> </tr> <tr> <td>2</td> <td>bb</td> </tr> <tr> <td>3</td> <td>cc</td> </tr> </tbody> </table>also on fiddle.
Comments
Post a Comment