JQuery vivo y Sortable

Question

Estoy tratando de poner en práctica de arrastrar y soltar para que pueda ordenar las listas de datos y actualizar la base de datos con las posiciones relevantes.

Tengo un ejemplo de trabajo, pero cuando trato de usar el mismo código en listas que son traídos a través de AJAX caso es vinculante pero ninguno de sus métodos se activan y los artículos no permanece intercambiado, (Intercambian espalda cuando se Suelta el ratón)

Esta es mi 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>

y luego mi JavaScript parece a esto. Sólo deseo del UL interna se va a intercambiar. Es decir, las listas que contienen los Dato2 li etc.

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

Uso de un evento como doble clic o clic fue la única manera de conseguir que el evento se unen en absoluto. Usando sortable no funcionaba.

Aquí está el código que he utilizado a intentado unir el elemento, así como la muestra anterior

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

También probé el código anterior sin la .live () envuelto alrededor, pero eso no funcionó bien.

Este es el código que carga la lista del servidor,

$(".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");
}

Cualquier sugerencia o punteros en la dirección correcta ayudarían.

Gracias

Answer 1

Está bien que han logrado solucionarlo y estoy seguro de por qué esto sería detenerlo trabajando pero sin duda es el problema. La lista que estaba tratando de ordenar tenía un flotador que queda en la hoja de estilos en él para mostrar la lista horizontalmente. Una vez me quita este estilo, entonces se activa el evento de actualización.

Ahora sólo tiene que utilizar display: inline a Estilo de la lista horizontalmente. Espero que esto ayude a alguien porque se tomó mis horas para solucionarlo.

Gracias por la ayuda. Ben

Answer 2

[Actualización]

Cambiar su línea de devolución de llamada AJAX de $("#form").html(data); a esto:

$("#form").html(data).find('.sortable').sortable(originalOptions);

Y cambiar el mandato original sortable() (que estoy asumiendo que está en otra parte) a algo como esto:

var originalOptions = { update: function(){ alert('click');}  };
$(".sortable").sortable( originalOptions );

Lo importante es asegurarse de que originalOptions está disponible para su uso en función de su showList.

[respuesta original]

Sólo tiene que utilizar refresh cuando la lista se actualiza. Así que digamos que usted tiene el código $.post:

$.post('/url', { new_positions: whatever }, function(data){
  // data = a bunch of 'lis' but no 'ul'
  $('.sortable').html(data).sortable('refresh');
}, 'html');

Esto cambia los elementos antiguos li para los nuevos, y la refresh debe volver a enlazar y aceptar los nuevos artículos.