Question

我正在使用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将其添加回来。我可能不得不重新启用掉线，但不确定如何做到这一点。

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

希望这会有所帮助!!

jqueryUI拖放，如何在目标更新后重新启用drop？

1 个答案: