jquery UI 可拖动：ui.children 不是函数

Question

我有一个可拖动的列表、一个可排序的可放置列表和第一个里面的几个 li。

现在我想把它们拉过来，在停止功能中，我有一个向第一个孩子添加一个类的函数（它是一个代表剪辑号的跨度

<li>
    <span>1.</span>
    <span>Title</span>
    <span>1min23sec</span>
</li>

)。这样做的原因是，我想在播放列表中表示原始剪辑编号（可排序）。

但我收到控制台错误提示

TypeError: ui.children is not a function
ui.children("li")[0].addClass(".slot_clip_info");

我不是 100% 确定，但我认为这个确切的代码在过去已经有效，我可能在不知不觉中改变了一些东西，但我不知道这一点。 可拖动：

$(function() {
    $(".pl_clipEntry").draggable({
        appendTo: "body",
        revert: "invalid",
        connectToSortable: "#tracks",
        distance: 20,
        helper: function(){
            return $(this).clone().width($(this).width());   // hack for the drag-clone to keep the correct width
        },
        stop: function(ui) {
            ui.children("li")[0].addClass(".slot_clip_info");
        },
zIndex: 100

     });
});

可排序：

$(function() {
    var removeItem;
    $("#tracks").sortable({
        items: "li:not(.placeholder)",
        connectWith: "li",
        placeholder: "sort_placeholder",
        helper: "clone",
        distance: 20,
        sort: function () {
            $(this).removeClass("ui-state-default");
            updatePlaylist();

        },
        over: function (event,ui) {
            updatePlaylist();
            removeItem = false;
            console.log(event);
            console.log(ui);

            var originalClass = ui.helper.context.childNodes[0].className;
            console.log(originalClass);

            var small_clip = originalClass.match(/(\d+)/g)[1];
            ui.item.context.children[0].innerHTML = small_clip;
            ui.item.context.children[0].classList.add("slot_clip_info");
        },
        out: function () {
            updatePlaylist();
            removeItem = true;

        },
        beforeStop: function(event,ui) {
            if (removeItem) {
                ui.item.remove();
            }
        },
        stop: function(event,ui) {

            console.log("checking placeholder");
            var list = $(this);
            var count = list.children(':not(.placeholder)').length;
            list.children('.placeholder').css("display", count > 0 ? "none" : "block");

            savePlaylist();
        }

    });

只要我拉入元素或重新排序它们，我就会收到上述错误。 此外，在刷新时，列表似乎会自行成倍增加.. 但我想这是另一个问题...

Full fiddle (pretty messy, functionality in top dropdown button "PL TOGGLE"

更新：我注意到的另一件事：第一次拖动没有问题，然后在释放时显示错误，随后的拖动将（大部分......有时他们这样做......）不起作用

Answer 1

你需要将 ui 做成一个 jquery 对象，然后将第一个元素包裹在另一个 jquery 对象中来做你想做的事情。

所以改变：

ui.children("li")[0].addClass(".slot_clip_info");

到

$($(ui).children("li")[0]).addClass(".slot_clip_info");

Answer 2

在 jQuery UI 的可拖动模块中，stop 函数有两个参数：event 和 ui。

ui 是一个 javascript 对象（而不是 jQuery 对象，这是有区别的。）

这个对象有 3 个属性：

• helper 这是一个 jQuery 对象
• position 这是一个 javascript 对象
• offset 这是一个 javascript 对象

根据您的 HTML 代码（我们没有），您可以替换

ui.children("li")[0].addClass(".slot_clip_info");

通过

ui.helper.children("li")[0].addClass(".slot_clip_info");