Asp.net mvc jqueryUI拖放，目标更新后如何重新启用拖放？

我正在使用asp.NETMVC3和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>

$（函数（）{
$（“.sourceItem”）.draggable({
助手：“克隆”，
附：“身体”
});
$（“#targetBox”）。可拖放({
接受：“.sourceItem”，
悬停类：“放置活动”，
drop：函数（事件、用户界面）{
$（“#targetBox”）。附加（“测试”）；
}
});
}); 

将内容放到“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>

@使用（Ajax.BeginForm（“Summary”、“Home”、新的AjaxOptions{UpdateTargetId=“smoothieBox”}））
{
@Html.ValidationSummary（true）
@Html.AntiForgeryToken（）
}

“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" />            
}

@使用（Ajax.BeginForm（“Blender”、“Home”、新的AjaxOptions{UpdateTargetId=“smoothieBox”}））
{
@Html.ValidationSummary（true）
@Html.AntiForgeryToken（）
@Html.HiddenFor（x=>x.SmoothieId）
}

---

现在，如果单击“btnGoBack”按钮，“smoothieBox”Div将再次更新以显示原始内容，您应该能够再次拖放。然而，这次我不能放弃它。我不明白为什么，可能是因为目标div“targetBox”被删除了，然后使用ajax将其添加回来。我可能必须重新启用删除，但不确定如何执行。

我猜当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>

$（函数（）{
BindEvents（）；
});
函数OnSuccess（）{
BindEvents（）；
}
函数BindEvents（）{
$（“.sourceItem”）.unbind（“draggable”）.draggable({
助手：“克隆”，
附：“身体”
});
$（“#targetBox”）.unbind（“可拖放”）.droppable({
接受：“.sourceItem”，
悬停类：“放置活动”，
drop：函数（事件、用户界面）{
$（“#targetBox”）。附加（“测试”）；
}
}); 
} 

---

希望这会有帮助

非常感谢你，我想你的解决方案会奏效的。回家后我会测试它。我更改了代码，但不知道为什么OnSuccess从未被解雇。我只是在OnSuccess函数中加了一个“alert（“good”）”。警报框没有出现。找到了解决方法。非常感谢你的帮助。