title: How to make draggable element as revertable when that element is appended to the list afterwords and element is generating dynamic inline style tag
body: <p>I know there are no. of questions related to this on stackoverflow one of them as <a href="https://stackoverflow.com/questions/17941834/how-to-make-dynamically-added-list-elements-draggable-in-jquery">How to make dynamically added list elements draggable in jQuery?</a></p>
  
  <p>But I am trying something different. I am adding my list elements at the time of page loads. As like below:</p>
  
  <pre><code>&lt;ul id="CreateCustomerListUL"&gt;
  
                &lt;li class="custList" draggable="true" data-id="200001" data-pnumber="1234567890" data-accountname="Nidhi Sales"&gt;&lt;strong&gt;Nidhi Sales&lt;/strong&gt; &lt;p&gt;1234567890&lt;/p&gt;&lt;/li&gt;                 
  
                &lt;li class="custList" draggable="true" data-id="200002"  data-pnumber="1234567890" data-accountname="Dhanashree Traders"&gt;&lt;strong&gt;Dhanashree Traders&lt;/strong&gt; &lt;p&gt;1234567890&lt;/p&gt;&lt;/li&gt;                  
  
                &lt;li class="custList" draggable="true" data-id="200003"  data-pnumber="1234567890" data-accountname="Amrut Traders" style="display: list-item;"&gt;&lt;strong&gt;Amrut Traders&lt;/strong&gt; &lt;p&gt;1234567890&lt;/p&gt;&lt;/li&gt; 
  &lt;/ul&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/bevQG.png" alt=""></p>
  
  <p>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.</p>
  
  <pre><code>&lt;tbody id="CustListTableBody"&gt;
  &lt;tr role="row" class="odd"&gt;&lt;td class="sorting_1"&gt;1&lt;/td&gt;&lt;td class=""&gt;Dhanashree Traders&lt;/td&gt;&lt;td&gt;1234567890&lt;/td&gt;&lt;td&gt;&lt;span class="glyphicon glyphicon-remove deleteRow" data-name="Dhanashree Traders" data-number="1234567890" data-id="200002"&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr role="row" class="even"&gt;&lt;td class="sorting_1"&gt;2&lt;/td&gt;&lt;td class=""&gt;Nidhi Sales&lt;/td&gt;&lt;td&gt;1234567890&lt;/td&gt;&lt;td&gt;&lt;span class="glyphicon glyphicon-remove deleteRow" data-name="Nidhi Sales" data-number="1234567890" data-id="200001" &gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr role="row" class="odd"&gt;&lt;td class="sorting_1"&gt;3&lt;/td&gt;&lt;td class=""&gt;Amrut Traders&lt;/td&gt;&lt;td&gt;1234567890&lt;/td&gt;&lt;td&gt;&lt;span class="glyphicon glyphicon-remove deleteRow" data-name="Amrut Traders" data-number="1234567890" data-id="200003" &gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>The datatable will be look like this: <img src="https://i.stack.imgur.com/covet.png" alt="enter image description here">
  The droppable code is like this: </p>
  
  <pre><code>$('#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 = '&lt;span class="glyphicon glyphicon-remove deleteRow" data-name="'+custName+'" data-number="'+custNumber+'" data-id="'+custId+'"&gt;&lt;/span&gt;';                                                    
  
                 t.row.add( [ rowCount, custName, custNumber, deleteRow]).draw();   
  
                  $(source).remove();                     
              }               
          });
  </code></pre>
  
  <p>`
  I am deleting the row after clicking on cross symbol in third column. Then deleting the row of datatable is : </p>
  
  <pre><code>$('#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 = '&lt;li class="custList" draggable="true" data-id="'+id+'"data-pnumber="'+pNumber+'" data-accountname="'+name+'"&gt;&lt;strong&gt;'+name+'&lt;/strong&gt; &lt;p&gt;'+pNumber+'&lt;/p&gt;&lt;/li&gt;';
  
              var $element = $('&lt;li class="customerList" draggable="true" data-id="'+id+'"data-pnumber="+pNumber+" data-accountname="'+name+'"&gt;&lt;strong&gt;'+name+'&lt;/strong&gt; &lt;p&gt;'+pNumber+'&lt;/p&gt;&lt;/li&gt;');
      $element.draggable().resizable();
      $('#CreateCustomerListUL').append($element);
            var row = $(this).closest("tr").get(0);
           t.fnDeleteRow(t.fnGetPosition(row));                 
      });
  </code></pre>
  
  <p>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 <a href="https://stackoverflow.com/questions/2465158/is-it-possible-to-remove-inline-styles-with-jquery">this link</a> and other stackoverflow links. But I am not getting the output. Specially affecting is <code>style="position:absolute;"</code> if I removes this position value blank by inspect element on browser then it is reverting to its original position.</p>
  
  <p>I tried the following code for reverting the drag.</p>
  
  <pre><code>$('#CreateCustomerListUL li').draggable(
    {revert : function(event, ui) { 
      alert('Hello'); 
      $(this).data("uiDraggable").originalPosition = { top : 0, left : 0 }; 
  }});
  </code></pre>