0

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

1 に答える 1

1

あなたが探していますrevert:valid

ここにドキュメントがあります

そして例：

$("#draggable").draggable({
    revert: "valid"
});
于 2013-04-03T09:33:43.523 に答える