How to make draggable element as revertable when that element is appended to the list afterwords and element is generating dynamic inline style tag

Question

I know there are no. of questions related to this on stackoverflow one of them as How to make dynamically added list elements draggable in jQuery?

But I am trying something different. I am adding my list elements at the time of page loads. As like 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 list page loaded. This each item is dragged and dropped into a dataTable. And list increases as the drag and dropped items from customer List. 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 be look like this: enter image description here The droppable code is like this:

$('#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 cross symbol in third column. Then deleting the row of 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));                 
    });

Up to this all is working fine and if I am dropping the element that was last time deleted and appended to list is also dropping in the datatable successfully.But problem is that, when I am dragging the same element and if dropping failed then it is not reverting (means not taking its original position). It is staying where it was dragged. Automatically inline style tag is generated when the dragging started and that css affecting it from reveting. I am also unable to delete that inline generated code. I also tried this link and other stackoverflow links. But I am not getting the output. Specially affecting is style="position:absolute;" if I removes this position value blank by inspect element on browser then it is reverting to its original position.

I tried the following code for reverting the drag.

$('#CreateCustomerListUL li').draggable(
  {revert : function(event, ui) { 
    alert('Hello'); 
    $(this).data("uiDraggable").originalPosition = { top : 0, left : 0 }; 
}});

so basically you want your element to return if the drag'n'drop fails? then this is a dublicate of [this question](http://stackoverflow.com/a/5848800/3874924) with an accepted answer — jhinzmann, Jun 06 '15 at 22:43
possible duplicate of [Revert a jQuery draggable object back to its original container on out event of droppable](http://stackoverflow.com/questions/5735270/revert-a-jquery-draggable-object-back-to-its-original-container-on-out-event-of) — jhinzmann, Jun 06 '15 at 22:47
@jhinzmann I tried these options also. All works fine but once I start to drag then dynamically inline style tag is generated with that element only and one option 'position:absolute' is preventing to revert it. I noticed it from the inspect element from the browser. When I removed 'absolute' from the inspect element then it automatically reverting to its original position. — Laxminarayan, Jun 07 '15 at 06:09
could you please add the code where you tried to use the draggable revert option? — jhinzmann, Jun 07 '15 at 10:46
I set position of all `li` element as `position: static !important;` then it works perfect but it is not showing element with mouse cursor when I am dragging it. But it is successfully dragged and dropped into droppable. But I want dragging effect with mouse cursor also. I have tried following code for reverting `$('#CreateCustomerListUL li').draggable({ revert : function(event, ui) { alert('Hello'); $(this).data("uiDraggable").originalPosition = { top : 0, left : 0 }; }});` — Laxminarayan, Jun 07 '15 at 15:22
when I used this code `$("#CreateCustomerListUL li").draggable({ revert: function(dropped) { var dropped = dropped && dropped[0].id == "droppable"; if(!dropped) alert("I'm reverting!"); return !dropped; } }).each(function() { var top = $(this).position().top; var left = $(this).position().left; $(this).data('orgTop', top); $(this).data('orgLeft', left); });` then the draggable property of elements is disabled. Mouse pointer is showing as disabled icon as circle having its diameter. — Laxminarayan, Jun 07 '15 at 15:39
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/79902/discussion-between-laxminarayan-and-jhinzmann). — Laxminarayan, Jun 07 '15 at 18:04

score 0 · Answer 1 · answered Jun 07 '15 at 16:02

0

According to the docs you should use this option:

.draggable({
  revert: "invalid"
});

If set to "invalid", revert will only occur if the draggable has not been dropped on a droppable. For "valid", it's the other way around

answered Jun 07 '15 at 16:02

jhinzmann

968
6
15

How to make draggable element as revertable when that element is appended to the list afterwords and element is generating dynamic inline style tag

1 Answers1