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

这是关于它的文档

还有一个例子：

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