0

私はasp.net mvc3とjqueryUIを使用しています。これがドラッグアンドドロップのコードです。動作します。ドラッグアンドドロップに問題はありません。

<script type="text/javascript">
    $(function () {
        $(".sourceItem").draggable({
            helper: "clone",
            appendTo: "body"
        });

        $("#targetBox").droppable({
            accept: ".sourceItem",
            hoverClass: "drop-active",
            drop: function (event, ui) {
                $("#targetBox").append("test");                   
            }
        });
    }); 
</script>

コンテンツを「targetBox」にドロップした後、「btnBlend」ボタンをクリックすると、「smoothieBox」Div が更新されます。

    <div id="smoothieBox">
        @using (Ajax.BeginForm("Summary", "Home", new AjaxOptions { UpdateTargetId = "smoothieBox" }))
        {
            @Html.ValidationSummary(true)
            @Html.AntiForgeryToken()
            <div id="blender">
                <div id="targetBox" class="clearfix">
                </div>
                <input id="btnBlend"  type="image" src="@Links.Content.images.btn_blend_png" name="image" width="137" height="33" />
            </div>           
        }
    </div>

「smoothieBox」Div の新しいコンテンツは次のようになります。

@using (Ajax.BeginForm("Blender", "Home", new AjaxOptions { UpdateTargetId = "smoothieBox" }))
{
    @Html.ValidationSummary(true)
    @Html.AntiForgeryToken()

    @Html.HiddenFor(x =>x.SmoothieId )

    <input id="btnGoBack"  type="image" src="@Links.Content.images.btn_go_back" name="image" width="137" height="33" />            
}

ここで、「btnGoBack」ボタンをクリックすると、「smoothieBox」Div が再び更新されて元のコンテンツが表示され、再びドラッグ アンド ドロップできるようになります。ただし、今回はドロップできません。おそらくターゲットdiv "targetBox"が削除され、ajaxを使用して追加し直したため、理由がわかりませんでした。おそらくドロップを再度有効にする必要がありますが、その方法がよくわかりません。

4

1 に答える 1

1

ajax が発生したときに、このイベントがその DOM 要素にバインド解除されると思います。したがって、これらのイベントを再バインドする必要があります。

フォームに ajax オプション "OnSuccess" を追加します。このメソッドは、ajax リクエストが成功した後に呼び出されます。

@using (Ajax.BeginForm("Blender", "Home", new AjaxOptions 
                                  { 
                                     UpdateTargetId = "smoothieBox",
                                     OnSuccess = "OnSuccess"
                                  }))

スクリプト内:

<script type="text/javascript">
  $(function () {
     BindEvents();
  });

  function OnSuccess() {
     BindEvents();
  }

  function BindEvents(){
     $(".sourceItem").unbind("draggable").draggable({
        helper: "clone",
        appendTo: "body"
     });

     $("#targetBox").unbind("droppable").droppable({
        accept: ".sourceItem",
        hoverClass: "drop-active",
        drop: function (event, ui) {
            $("#targetBox").append("test");                   
        }
     }); 
  } 

</script>

これが役立つことを願っています!!

于 2012-09-06T20:05:16.013 に答える