Question

I want to implement a page with 2 lists, and it allows user to drag and drop items between the two lists. This can be implement by using jQuery UI library:

html:

<!--list A-->
<div id='list_a'>
  <ul class='sortable'></ul>
</div>

<!--list B-->
<div id='list_b'>
  <ul class='sortable'>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

js：

$( "ul.sortable" ).sortable({
    connectWith: "ul",
    dropOnEmpty: true
});

$( ".sortable" ).disableSelection();

The problem is, when I using jQuery ajax to generate list B, the drag and drop does not work anymore. I suspect that the jQuery is unable to select the ul .sortable, because when I view the HTML source, I can only see <div id='list_b'></div>.

My ajax code:

$('#field_a h3 a').click(function() {
    var form_data = {
        required_data:$(this).text().trim(),
        ajax: 1
    };

    $.ajax({
        url: 'get_list_b',
        dataType: 'html',
        type:'POST',
        success: function(msg){
            $('#list_b').html(msg);
        }
   });
});

I am using CodeIgniter. Any idea?

Answer 1

the first:

what is the element $(‘#field_a h3 a’) ?

second:

it doesn’t work because when you do that $(‘#list_b’).html(msg) – you are removing the UL element.

So, your binds referencing to the unexisting element.

you can do like that:

$.ajax({
        url: 'get_list_b',
        dataType: 'html',
        type:'POST',
        success: function(msg){
            var list=$('#list_b');
            list.html(msg);
            $( "ul.sortable",list ).sortable({
                connectWith: "ul",
                dropOnEmpty: true
            });
        }
   });

and it could be more helpful if you could put your example to http://jsfiddle.net/