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

Question

我有一个可拖动列表，一个 sortable-droppable 列表和第一个里面的几个 li。

现在我想把它们拉过来，在 stop-funtion 中我有一个函数将 class 添加到第一个 child （它是一个代表 clip-number 喜欢

<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

在jQuery UI的可拖动模块中，stop函数有2个参数：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");

Answer 2

您需要将 ui 设为 jquery 对象，然后将第一个元素包装在另一个 jquery 对象中以执行您想要的操作。

所以改变：

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

至

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

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

jquery UI draggable: ui.children is not a function

javascript

jquery-ui

draggable

jquery-ui-sortable