Drag and Drop only works the first time

Drag and Drop only works the first time

I've created a drag and drop screen wtih JQuery where you can change the order of 8 images.  If you drag image 8 over image 7, then 8 and 7 are switched.  However, when I drag 8 over 7 again, nothing happens (it should switch 7  and 8 back to the beginning).  It looks like the HTML is not getting refreshed after the first time - the from and to values are the same as the first drag.
 
A secondary problem is that after the first (successful) drag and drop, the next time the values are returned in the JQuery selector they look like "6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6..." where 6 is the image id of one of the from or to images.  It should just be "6" as it is the first time.  You'll see in my code that I got around this by selecting the first split element, but that doesn't explain this behavior.  I've found a number of different ways of doing the selectors to get the value, but they all return these long strings each time after the first.
 
The HTML looks like the following where I'm retrieving the values first for the ImageId - first input element, then for the database table id called the featuredId - the second input element.
 

  1. <

    td>

    <div id="divFeaturedItems" class="drop" style="list-style-type: none; border: 1px solid red;">

    <li id="dlFeaturedItems_ctl07_imgHome" height="200px">

    <img src='Images\Animalier\portraitofhoundswatercolor.png' title='Portrait of hounds ' alt='' height="200px" />

    <input type="hidden" name="dlFeaturedItems$ctl07$ImageId" id="dlFeaturedItems_ctl07_ImageId" value="37" />

    <input type="hidden" name="dlFeaturedItems$ctl07$FeaturedId" id="dlFeaturedItems_ctl07_FeaturedId" value="6" />

    </li>

    </div>

    </

    td>

    　

 
Here's my JQuery.  I'm doing a __doPostBack at the end in order to force the data to re-bind.
 

  1. function makeElementsDraggableAndDroppable() {

    $(

    ".block").draggable({ helper: 'clone' });

    $(

    ".drop").draggable({ helper: 'clone' });

    $(

    ".drop").droppable({

    activeClass:

    'droppable-active',

    hoverClass:

    'droppable-hover',

    drop:

    function (ev, ui) {

    var draggable = ui.draggable;

    $(draggable).addClass(

    "drag");

    var imageIdFrom = $(this).children("li:first").children("input").eq(0).attr("value");

    imageIdFrom = imageIdFrom.split(

    ',')[0];

    var featuredIdFrom = $(this).children("li:first").children("input").eq(1).attr("value");

    featuredIdFrom = featuredIdFrom.split(

    ',')[0];

    var imageIdTo = $(draggable).children("li:first").children("input").eq(0).attr("value");

    imageIdTo = imageIdTo.split(

    ',')[0];

    var featuredIdTo = 0;

    if ($(draggable).children("li:first").children("input").eq(1).attr("value") == null) {

    featuredIdTo = featuredIdFrom;

    }

    else {

    featuredIdTo = $(draggable).children(

    "li:first").children("input").eq(1).attr("value");

    }

    featuredIdTo = featuredIdTo.split(

    ',')[0];

    alert(imageIdFrom +

    ',' + featuredIdFrom + ' | ' + imageIdTo + ',' + featuredIdTo);

    $.ajax({

    type:

    "POST",

    url:

    "MaintFeaturedItems.aspx/updateFeaturedItems",

    data: JSON.stringify({ imageIdFrom: imageIdFrom, featuredIdFrom: featuredIdFrom, imageIdTo: imageIdTo, featuredIdTo: featuredIdTo }),

    contentType:

    "application/json; charset=utf-8",

    dataType:

    "json",

    error:

    function (xhr, status, error) {

    // Boil the ASP.NET AJAX error down to JSON.

    var err = eval("(" + xhr.responseText + ")");

    alert(

    "Error: " + err.Message + ": " + err.StackTrace + ", " + xhr.statusText);

    },

    success:

    function () {

    }

    });

    $(

    this).append($(draggable).clone().children("li:first").addClass("drag"));

    $(draggable).addClass(

    "block");

    __doPostBack(

    "cmdDoSomething", "");

    return false;

    }

    });

    }

My web method being called looks like:
 

  1. [

    WebMethod]

    public static void updateFeaturedItems(int imageIdFrom, int featuredIdFrom, int imageIdTo, int featuredIdTo)

    {

    bool success = DataAccess.UpdateFeaturedItems(imageIdFrom, featuredIdFrom, imageIdTo, featuredIdTo);

    }

which simply updates the database with the new values.
 
The Bind method follows.  It all looks pretty straightforward, but obviously something is missing.  After the order has been reversed to say 1 2 3 4 5 6 8 7, when I try to drag the last item (7 now) the second time, instead of saying it's itam 7, it still has item 8's id's.  It's like the draggable is still the same as the first time.
 

  1. protected void Page_Load(object sender, EventArgs e)

    {

    BindData();

    }

    private void BindData()

    {

    DataTable dtFeaturedItems = DataAccess.GetFeaturedItems();

    dlFeaturedItems.DataSource = dtFeaturedItems;

    dlFeaturedItems.DataBind();

    DataTable dtImages = DataAccess.GetImages("-");

    dlImages.DataSource = dtImages;

    dlImages.DataBind();

    }

            Any help very much appreciated!  I'm still new to JQuery and these selectors.