Tapuwa Simon Mundeta February 2016

Jquery Drag Drop Sort from List to Table Cell not working

I have a sortable list and I would like to drop its list items in a table cell, And from the table cell to the sort the items in the cell.

First Step is to drag list item into the tblcell. Second Step sort list item in the table(2 column) only the list items in the cell can only be sorted and not the fixed numbers in the first column of the table. Third Step to return the cell item back to the 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>&nbsp;</td>
    </tr>
    <tr>
      <td>2</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>3</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>        

Answers


skobaljic February 2016

Sorting table cells with jQueryUI has no much sense, because it breaks the table layout. Sorting table rows is something that may work for you and it is not destructive.

Since you need to drag and drop elements, than you need to use appropriate jQueryUI widgets Draggable and Droppable.

In my eyes that looks like a bad solution and I would rather use some buttons to exchange data between list and table. It is bad because I can see some bugs in Firefox and it is hard to drag table, but avoid table rows sorting. But if you have to use dragging, than here is one 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(' + i + ')').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(' + i + ')').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
   });

 });
    

Post Status

Asked in February 2016
Viewed 3,716 times
Voted 9
Answered 1 times

Search




Leave an answer