如何制作具有不同功能的可拖动div?

发布于 2024-11-15 03:37:37 字数 1142 浏览 5 评论 0原文

我有四个可拖动的 div。还有一个 div,我将可拖动的 div 放置在其中。我的代码基本上只是一个我从 jQuery 网站下载并修改了一些的 API。

我的问题是所有的 div 被删除时都具有相同的功能。如何为各个 div 制作单独的功能?

它看起来像这样:

$(function() {
$("#draggable").draggable({ revert: "invalid" });
$("#draggable2").draggable({ revert: "invalid" });
$("#draggable3").draggable({ revert: "invalid" });
$("#draggable4").draggable({ revert: "invalid" });

$("#droppable").droppable({
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    drop: function(event, ui) {
        if (document.getElementById('draggable')){
            window.location.replace("http://www.example.com");      
            }
        if (document.getElementById('draggable2')){
            window.location.replace("http://www.example2.com");     
            }
        if (document.getElementById('draggable3')){
            window.location.replace("http://www.example3.com");     
            }
        if (document.getElementById('draggable4')){
            window.location.replace("http://www.example4.com");     
            }
        }
    });
});

这段代码没有运气。有什么想法吗?

提前致谢!

问候,VG

I have four divs that are draggable. And a div where I drop the daggable divs. My code is basically just an API I've downloaded and modify a little form jQuery's sites.

My problem is that all the divs have the same function when they are dropped. How can I make individual functions to individual divs?

It looks like this:

$(function() {
$("#draggable").draggable({ revert: "invalid" });
$("#draggable2").draggable({ revert: "invalid" });
$("#draggable3").draggable({ revert: "invalid" });
$("#draggable4").draggable({ revert: "invalid" });

$("#droppable").droppable({
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    drop: function(event, ui) {
        if (document.getElementById('draggable')){
            window.location.replace("http://www.example.com");      
            }
        if (document.getElementById('draggable2')){
            window.location.replace("http://www.example2.com");     
            }
        if (document.getElementById('draggable3')){
            window.location.replace("http://www.example3.com");     
            }
        if (document.getElementById('draggable4')){
            window.location.replace("http://www.example4.com");     
            }
        }
    });
});

No luck in this code. Any ideas?

Thanks in advance!

Regards, VG

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

风蛊 2024-11-22 03:37:37

在“if”语句中,您需要执行以下操作:

if(ui.draggable.attr('id') === 'draggable')
{
    // do stuff
}

In your 'if' statements you need to do something like:

if(ui.draggable.attr('id') === 'draggable')
{
    // do stuff
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文