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

    });

一旦我拉动元素IN或重新排序它，我得到所述错误。此外，在刷新时，列表似乎会成倍增加..但我猜这是另一个问题......

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函数有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");

jquery UI draggable：ui.children不是一个函数

2 个答案: