jQuery droppables - 在放置时更改元素

发布于 2024-07-08 13:29:43 字数 624 浏览 16 评论 0原文

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

原文

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

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

Sample code:

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

The problem is, when i use

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

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

时光是把杀猪刀 2024-07-15 13:29:43

那么，您想要的是保持原始列表完整并将列表项放入 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 调用仅在调用时使项目可拖动。如果您更改或添加元素并希望它们可拖动，则需要再次调用draggable()函数。

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

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

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.

回复收藏 0 原文

胡渣熟男 2024-07-15 13:29:43

感谢您的回复。

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

thanx for the reply.

Your first code worked, and plus I can also sort the divs in the droppable like this:

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

~~Now the problem is how do I know which list is which once I have changed it to divs?~~

I use the following code to get each element 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();
        }

回复收藏 0 原文

~没有更多了~