There are numerous questions related to this topic on stackoverflow, such as How to make dynamically added list elements draggable in jQuery?
However, I am attempting something unique. I am adding my list elements during the page load as shown below:
<ul id="CreateCustomerListUL">
<li class="custList" draggable="true" data-id="200001" data-pnumber="1234567890" data-accountname="Nidhi Sales"><strong>Nidhi Sales</strong> <p>1234567890</p></li>
<li class="custList" draggable="true" data-id="200002" data-pnumber="1234567890" data-accountname="Dhanashree Traders"><strong>Dhanashree Traders</strong> <p>1234567890</p></li>
<li class="custList" draggable="true" data-id="200003" data-pnumber="1234567890" data-accountname="Amrut Traders" style="display: list-item;"><strong>Amrut Traders</strong> <p>1234567890</p></li>
</ul>
Once the list page has loaded, each item is dragged and dropped into a dataTable. The following code is automatically generated after drag and drop:
<tbody id="CustListTableBody">
<tr role="row" class="odd"><td class="sorting_1">1</td><td class="">Dhanashree Traders</td><td>1234567890</td><td><span class="glyphicon glyphicon-remove deleteRow" data-name="Dhanashree Traders" data-number="1234567890" data-id="200002"></span></td></tr>
<tr role="row" class="even"><td class="sorting_1">2</td><td class="">Nidhi Sales</td><td>1234567890</td><td><span class="glyphicon glyphicon-remove deleteRow" data-name="Nidhi Sales" data-number="1234567890" data-id="200001" ></span></td></tr>
<tr role="row" class="odd"><td class="sorting_1">3</td><td class="">Amrut Traders</td><td>1234567890</td><td><span class="glyphicon glyphicon-remove deleteRow" data-name="Amrut Traders" data-number="1234567890" data-id="200003" ></span></td></tr>
</tbody>
The datatable will look like this: The droppable code is as follows:
$('#CustListTable').droppable({
onDrop:function(e,source){
var t = $('#CustListTable').DataTable();
var rowCount = t.rows().data().length +1;
var custName = $(source).attr('data-accountname');
var custNumber = $(source).attr('data-pnumber');
var custId = $(source).attr('data-id');
var deleteRow = '<span class="glyphicon glyphicon-remove deleteRow" data-name="'+custName+'" data-number="'+custNumber+'" data-id="'+custId+'"></span>';
t.row.add( [ rowCount, custName, custNumber, deleteRow]).draw();
$(source).remove();
}
});
I am deleting the row after clicking on the cross symbol in the third column. The code for deleting the row from the datatable is:
$('#CustListTable').on('click','.deleteRow',function() {
var t = $('#CustListTable').dataTable();
var name=$(this).attr('data-name');
var pNumber = $(this).attr('data-number');
var id = $(this).attr('data-id');
var item = '<li class="custList" draggable="true" data-id="'+id+'"data-pnumber="'+pNumber+'" data-accountname="'+name+'"><strong>'+name+'</strong> <p>'+pNumber+'</p></li>';
var $element = $('<li class="customerList" draggable="true" data-id="'+id+'"data-pnumber="+pNumber+" data-accountname="'+name+'"><strong>'+name+'</strong> <p>'+pNumber+'</p></li>');
$element.draggable().resizable();
$('#CreateCustomerListUL').append($element);
var row = $(this).closest("tr").get(0);
t.fnDeleteRow(t.fnGetPosition(row));
});
Everything is functioning correctly up to this point. However, if I try to drag the same element and the drop fails, it does not revert back to its original position. The issue seems to be caused by inline styling generated when dragging starts, particularly the style="position:absolute;" attribute. I have attempted various solutions from stackoverflow but haven't been successful in resolving this reverting problem.
I have tried the following code snippet for reverting the drag:
$('#CreateCustomerListUL li').draggable(
{revert : function(event, ui) {
alert('Hello');
$(this).data("uiDraggable").originalPosition = { top : 0, left : 0 };
}});