3

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

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

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

谢谢

4

2 回答 2

2

[更新]

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

于 2010-02-05T04:53:34.180 回答
1

好的，我已经设法修复它，我不确定为什么这会阻止它工作，但这绝对是问题所在。我试图排序的列表在其样式表中留有一个浮点数，用于水平显示列表。一旦我删除了这种样式，就会触发更新事件。

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

谢谢您的帮助。本

于 2010-02-08T08:29:15.403 回答