Question

I am trying to implement drag and drop so I can sort lists of data and update the database with the relevant positions.

I have a working example but when I try to use the same code on lists that are brought in via ajax the event is binding but none of its methods are triggered and the items do not stay swapped, (They swap back when you let go of the mouse)

here is my html

<ul class='sortable'>
    <li>
        <ul>
            <li>Data</li>
            <li>Data2</li>
        </ul>
   </li>
   <li>
        <ul>
            <li>Data3</li>
            <li>Data4</li>
        </ul>
   </li>
</ul>

and then my JavaScript looks like this. I only want the internal UL’s to be swapped. Ie the lists containing the li Data2 etc.

$(document).ready(function()
{
    //$(".sortable").disableSelection();
    $(".sortable").live("dblclick", function()
    {
        $(".sortable").sortable({
            update : function()
            {
                alert("update");
            }
        });
    });
});

Using an event like double click or click was the only way I could get the event to bind at all. Using sortable did not work.

Here is the code I have used to tried to bind the element as well as the sample above

$(document).ready(function()
{
    $(".sortable").live("sortable", function()
    {
        $(".sortable").sortable({
            update : function()
            {
                alert("update");
            }
        });
    });
});

I also tried the above code without the .live() wrapped around but that did not work either.

Here is the code that loads the list from the server,

$(".myLink").live("click", function()
{
    var id   = $(this).attr("id");
    var url = base_url + "admin/controller/function/" + id;

    showList(url);

    return false;
});


//loads data into the form div
function showList(url)
{
    var arr = new Array();
    $.post(url, arr, function(data)
    {
        $("#form").html(data);

    }, "text");
}

Any suggestions or pointers in the right direction would help.

Thanks

Answer 1

Ok I have managed to fix it and I am unsure why this would stop it working but it definitely is the problem. The List I was trying to sort had a float left in the style sheet on it for displaying the list horizontally. Once I removed this style the update event was then triggered.

I now just use display:inline to to style the list horizontally. I hope this helps somebody because it’s took my hours to work it out.

Thanks for the help.
Ben