Question

I am using asp.net mvc3 and jqueryUI. here’s my code for drag and drop, it works, I have no problem to drag and drop.

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

after you drop the content to “targetBox”, now, if you click on the “btnBlend” button, “smoothieBox” Div will be updated.

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

The new Content in the “smoothieBox” Div will be:

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

now, if you click on “btnGoBack” button, “smoothieBox” Div will be updated again to show the original content, you should be able to drag and drop again. however, this time I cannot drop it. I coudln’t figure out why, probably because the target div “targetBox” is removed , then add it back using ajax. I probably have to re-enable the drop, but not really sure how to do it.

Answer 1

I guess when the ajax occurred then this event get unbind to that DOM element. So you must have to rebind these events.

Add an ajax option “OnSuccess” in the form. This method wil call after the ajax request success.

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

In the script :

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

Hope this will help !!