asked on

Need help with making anchors in a table sortable

I have a table that has 7 columns and 3 rows. In some of the cells I have anchors. I would like to make the anchors dragable so I can move them to other cells in the table. The anchors all have the class: isSortable.

I have tried adding the following:

$('a.isSortable').sortable();

Open in new window

but that doesn't seem to work. What do I use to make the anchors dragable to other cells?

Mrunal

Hi
What do you mean by dragable of anchor cells ?

If you want to move anchor cells, where do you want to move and how that logic will be?
Do you want to make columns as dragable? If yes, then you can refer:
https://www.jqueryscript.net/demo/Drag-Drop-Bootstrap-Table-Columns/

and make changes like only anchor cells are handle to drag columns.

Another example is:
https://embed.plnkr.co/plunk/tUn0Ke

Mrunal

Try and let us know

Zakaria Acharki

You could use the jQuery drag and drop events holding the dragged anchor id in "DataTransfer", like :

$(function() {
  $('.isSortable').on("dragstart", function(event) {
    var dt = event.originalEvent.dataTransfer;
    dt.setData('Text', $(this).attr('id'));
  });
  
  $('table td').on("dragenter dragover drop", function(event) {
    event.preventDefault();
    
    if (event.type === 'drop') 
    {
      var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('id'));
      de = $('#' + data).detach();
      de.appendTo($(this));
    };
  });
})

Open in new window

Working live fiddle

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

lenamtl

Hi,

I recommend you the use of Datatables https://datatables.net/
everything is there and ready to use...