4

我对 jQuery 有点陌生，希望有人能帮助我。

在删除 (li) 之后，我试图将一个元素 (li) 更改为另一个元素 (div)。

示例代码：

$("#inputEl>li").draggable({ 
    revert: true, 
    opacity: 0.4,
    helper: "clone"
});
$("#dropEl")
    .droppable({ 
        accept: ".drag",
        hoverClass: "dropElhover",
        drop: function(ev, ui) {
            // change the li element to div here
        }
});

问题是，当我使用

drop: function(ev, ui) {
     $(ui.draggable).replaceWith("<div>Some content</div>");
}

触发上述功能时，将禁用原始可拖动元素。

我正在使用最新的 jQuery 和 jQuery UI 稳定版本。

4

2 回答 2

3

那么，您想要的是保持原始列表完整并将列表项放入 dropEl 中？这个怎么样：

drop: function(ev,ui) {
     $(this).append("<div>Some content</div>");
}

或者，如果你想用 div 元素替换列表元素，并且 div 元素也可以拖动，你可以试试这个：

drop: function(ev, ui) {
        $(ui.draggable).replaceWith("<div>Some content</div>");
        $("#inputEl>div").draggable({ 
            revert: true, 
            opacity: 0.4,
            helper: "clone"
        });
    }

原始的可拖动调用仅在调用时使项目可拖动。如果您更改或添加元素并希望它们可拖动，则需要再次调用 draggable() 函数。

于 2008-11-14T16:01:04.207 回答
1

谢谢你的回复。

您的第一个代码有效，而且我还可以像这样对 droppable 中的 div 进行排序：

    drop: function(ev, ui) {
    $(this).append("<div>Some content</div>");
    $("#dropEl").sortable();
}

现在的问题是，一旦我将其更改为 div，我如何知道哪个列表是哪个？

我使用以下代码来获取每个元素 id：

drop: function(ev, ui) {
            revert: true;
            var this_id = $(ui.draggable).attr("id");
            $(this).append('<div id="'+this_id+'">Some content</div>');
            $("#dropEl").sortable();
        }
于 2008-11-15T02:53:02.203 回答