獲取Draggable元素回到它在jquery中的位置

Question

我正在創建一個使用jquery ui拖放的表單生成器，它運行良好，但現在正在嘗試執行的操作是，如果可拖動對象沒有進入可丟棄區域以獲取回到它原來的地方我的代碼是：

<script> 


    $(function() { 
    $("#dr td").draggable(); 
    $("#droppable").droppable({ 
     drop: function(event, ui) { 


      var InputName = ui.draggable.attr("id"); 
      console.log(InputName); 
      //$.post("socialformpost.php", { add: "John"}); 
      var text = $('#myform').text(); 
      $('#myform').show(); 
      $('#sf').show(); 
      $('#myform').append("<div style=\"background-color:#CCC;padding:10px;margin:10px\">"+InputName+"</div>"); 
      $('#myspan').append(InputName+','); 


     }, 
     r 
    }); 
    }); 
    </script> 

HTML：

<table id="dr"> 
    <tr><td id="FirstName"><span>First Name : </span><input type="text" name="FirstName" data-widget="datepicker" class="draggable" id="draggable"/></td></tr> 
    <tr><td id="LastName">Last Name : <input type="text" name="LastName" class="draggable"/></td></tr> 
    <tr><td id="Gender">Gender : <input type="text" name="Gender" class="draggable"/></td></tr> 
    <tr><td id="Email">Email: <input type="text" name="" class="draggable"/></td></tr> 
    <tr><td id="Phone">Phone : <input type="text" class="draggable"/></td></tr> 
    <tr><td id="Country">Country : <input type="text" class="draggable"/></td></tr> 
    <tr><td id="City">City : <input type="text" class="draggable"/></td></tr> 
</table> 
<div style="background:#ccc;width:300px;height:400px;border:2px dotted #000" id="droppable" name="mydiv"> 

Answer 1

你正在尋找revert:valid

here's the documentation on it

和示例：.draggable

$("#draggable").draggable({ 
    revert: "valid" 
});