jQuery droppables-更改放置元素 [英] jQuery droppables - Change element on drop

问题描述

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

I'm a bit new to jQuery and hope somebody can help me out.

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

I'm trying to change an element (li) to another element (div) after the (li) has been dropped.

示例代码:

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

触发以上功能时，原始的可拖动元素将被禁用.

the original draggable elements will be disabled when the function above is triggered.

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

I'm using the latest jQuery and jQuery UI stable versions.

推荐答案

因此，您想要保持原始列表不变并将列表项放入dropEl中吗? 怎么样:

So, what you want is to keep your original list intact and drop list items into dropEl? How about this:

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

或者，如果要用div元素替换列表元素，并且还可以拖动div元素，则可以尝试以下操作:

Or, if you want to replace the list elements with a div element and also have the div element draggable, you could try this:

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

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

The original draggable call only makes items draggable at the time it is called. If you change or add elements and want them to be draggable, you will need to call the draggable() function again.

这篇关于jQuery droppables-更改放置元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！