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 将其添加回来。我可能必须重新启用 drop，但不太确定该怎么做。

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 回答