Question

我对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稳定版本。

Answer 1

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

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

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

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

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

Answer 2

thanx回复。

你的第一个代码工作了，而且我还可以像这样对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();
        }

jQuery droppables - 在drop上更改元素

2 个答案: