Question

我正在尝试实施拖放操作，以便对数据列表进行排序并使用相关位置更新数据库。

我有一个工作示例，但是当我尝试在通过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");
            }
        });
    });
});

使用双击或点击等事件是我可以完全绑定事件的唯一方法。使用sortable不起作用。

以下是我用来尝试绑定元素的代码以及上面的示例

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

任何正确方向的建议或指示都会有所帮助。

由于

Answer 1

<强> [更新]

将您的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}}应重新绑定并接受新项目。

Answer 2

好的，我已经设法修复它，我不确定为什么这会阻止它工作，但它肯定是问题。我试图排序的列表在样式表中留有一个浮动，用于水平显示列表。删除此样式后，将触发更新事件。

我现在只使用display：inline来水平设置列表样式。我希望这对某人有所帮助，因为我花了很多时间来解决这个问题。

感谢您的帮助。本

JQuery Live和Sortable

2 个答案: