javascript - 当可拖动元素附加到列表后缀并且元素正在生成动态内联样式标签时，如何使可拖动元素可恢复

Question

我知道没有。在 stackoverflow 上与此相关的问题，其中一个是 How to make dynamically added list elements draggable in jQuery?

但我正在尝试不同的东西。我在页面加载时添加我的列表元素。如下图:

<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>

加载列表页面后。这每个元素都被拖放到数据表中。并且列表随着从客户列表中拖放元素而增加。拖拽后自动生成如下代码。

<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>

数据表将如下所示: 可放置的代码是这样的:

$('#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();                     
            }               
        });

` 单击第三列中的十字符号后，我将删除该行。然后删除数据表的行是:

$('#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));                 
    });

至此一切正常，如果我删除上次删除并附加到列表的元素，也会成功删除数据表。但问题是，当我拖动相同的元素时，如果删除失败那么它就不会恢复(意味着不回到原来的位置)。它停留在被拖拽的地方。拖动开始时会自动生成内联样式标签，并且影响它的 css 不会重新生成。我也无法删除内联生成的代码。我还尝试了 this link 和其他 stackoverflow 链接。但我没有得到输出。特别有影响的是 style="position:absolute;" 如果我通过浏览器上的检查元素删除此位置值空白，那么它将恢复到其原始位置。

我尝试了以下代码来恢复拖动。

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

Answer 1

根据docs你应该使用这个选项:

.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