JQuery Live and Sortable - PullRequest
Новая
       18

JQuery Live and Sortable

3 голосов
/ 05 февраля 2010

Я пытаюсь реализовать перетаскивание, чтобы я мог сортировать списки данных и обновлять базу данных соответствующими позициями.

У меня есть рабочий пример, но когда я пытаюсь использовать тот же код в списках, которые вводятся через ajax, событие является обязательным, но ни один из его методов не запускается, и элементы не меняются местами (они меняются при отпусти мышку)

вот мой 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>

и тогда мой JavaScript выглядит следующим образом. Я только хочу поменять местами UL. Т.е. списки, содержащие li Data2 и т. Д. 

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

Использование такого события, как двойной щелчок или щелчок, было единственным способом, которым я мог связать событие вообще. Использование сортируемой не работает.

Вот код, который я использовал для привязки элемента, а также пример выше 

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

Я также попробовал приведенный выше код без использования .live (), но это тоже не сработало.

Вот код, который загружает список с сервера, 

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

Любые предложения или указатели в правильном направлении помогут.

Спасибо

Ответы [ 2 ]

2 голосов
/ 05 февраля 2010

[обновление]

Измените линию обратного вызова AJAX с $("#form").html(data); на эту: 

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

И измените исходную команду sortable() (которую я предполагаю где-то в другом месте) на что-то вроде этого: 

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

Важно убедиться, что originalOptions доступен для использования в вашей функции showList.

[оригинальный ответ]

Вам просто нужно использовать refresh при обновлении списка. Допустим, у вас есть этот $.post код: 

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

Это заменяет старые li элементы для новых, и refresh должен перепривязать и принять новые элементы.

1 голос
/ 08 февраля 2010

Хорошо, мне удалось это исправить, и я не уверен, почему это остановит его работу, но это определенно является проблемой. В списке, который я пытался отсортировать, в таблице стилей остался плавающий элемент для горизонтального отображения списка. После удаления этого стиля событие обновления было запущено.

Теперь я просто использую display: inline, чтобы стилизовать список по горизонтали. Надеюсь, это кому-нибудь поможет, потому что мне потребовались часы, чтобы разобраться с этим.

Спасибо за помощь. Бен

...