JQueryUI - 也许是一个挑战？

发布于 2024-10-30 22:25:56 字数 1943 浏览 0 评论 0原文

我正在开发一个需要大量代码的网站，事实证明其性质大大超出了我对 JQuery 的有限知识。站点的结构如下（不太确定这是否是针对需要完成的操作的最佳结构，JQuery-wise）：

<script>
    $(function() {
        $(".menutype,.contenttype").draggable({revert:true});
        $(".content").droppable({accept:".menutype,.contenttype"});
        $(".content").droppable({
            drop:function(event,ui){
                $(this)
                $('div.content').attr('id', 'contenthover')
                .find( "p" )
                .html( "Droppped!" );
                }
        });
    });
</script>
<body>

<div class="header"><p>///HEADER///</p></div>

<div class="container">
<div class="wrapper1">
<div class="wrapper2">

<div class="content">
<p>///CONTENT///</p>
</div><!-- END "content" -->

<div class="menuL">
<div class="menutype-container">
<div class="menutype"></div>
<div class="menutype"></div>
<div class="menutype"></div>
<div class="menutype"></div>
</div><!-- END "menutype-container" -->
</div><!-- END "menuL" -->

<div class="menuR">
<div class="contenttype-container">
<div class="contenttype"></div>
<div class="contenttype"></div>
<div class="contenttype"></div>
<div class="contenttype"></div>
</div><!-- END "contenttype-container" -->
</div><!-- END "menuR" -->

</div><!-- END "wrapper2" -->
</div><!-- END "wrapper1" -->
</div><!-- END "container" -->

<div class="footer"><p>///FOOTER///</p></div>

</body>

基本前提是，一旦“menutype”DIV 之一被放置在可放置区域内，在内容DIV中显示相应的菜单结构。同样，一旦删除，“contenttype”就会显示该菜单中的内联内容。

此时我对如何实现这一目标感到困惑。我的主要问题是我不知道如何区分 .droppable 中的菜单和内容类型，因为我只知道如何定义它接受哪些项目，而不知道如何单独处理可拖动项目。

我并不期望有人吐出必要的代码，但一些指针或示例将不胜感激。

原文

I'm working on a website which requires a chunk of code, the nature of which is proving to greatly exceed my limited knowledge of JQuery. The structure of the site is as follows (not quite sure if this is optimally structured for what needs to be done with it, JQuery-wise):

<script>
    $(function() {
        $(".menutype,.contenttype").draggable({revert:true});
        $(".content").droppable({accept:".menutype,.contenttype"});
        $(".content").droppable({
            drop:function(event,ui){
                $(this)
                $('div.content').attr('id', 'contenthover')
                .find( "p" )
                .html( "Droppped!" );
                }
        });
    });
</script>
<body>

<div class="header"><p>///HEADER///</p></div>

<div class="container">
<div class="wrapper1">
<div class="wrapper2">

<div class="content">
<p>///CONTENT///</p>
</div><!-- END "content" -->

<div class="menuL">
<div class="menutype-container">
<div class="menutype"></div>
<div class="menutype"></div>
<div class="menutype"></div>
<div class="menutype"></div>
</div><!-- END "menutype-container" -->
</div><!-- END "menuL" -->

<div class="menuR">
<div class="contenttype-container">
<div class="contenttype"></div>
<div class="contenttype"></div>
<div class="contenttype"></div>
<div class="contenttype"></div>
</div><!-- END "contenttype-container" -->
</div><!-- END "menuR" -->

</div><!-- END "wrapper2" -->
</div><!-- END "wrapper1" -->
</div><!-- END "container" -->

<div class="footer"><p>///FOOTER///</p></div>

</body>

The basic premise is that once one of the "menutype" DIVs is dropped within the droppable area, a corresponding menu structure is revealed in the content DIV. Similarly, once dropped, "contenttype" shows the inline content within that menu.

At this point i'm stumped as to how I go about achieving this. My main problem is that I do not know how to differentiate the menu and content types within the .droppable, as I only know how to define which items it accepts, and not what to individually do with draggable items.

I'm not expecting someone to spit out the necessary code, but some pointers or examples would be greatly appreciated.

分享到QQ

分享到微博

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

发布评论

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

琴流音 2024-11-06 22:25:56

我看到很多人尝试使用可拖动/可放置，而他们真正需要的是可排序的。菜单通常是无序列表。转换

<div class="menuL">

将

<ul class="menuL">

所有更改

<div class="menutype"></div>

为，您可以对两个 ul 元素使用公共类

<li class="menutype"></li>

请尝试使用此 js 代码

$(".menuL").sortable({
    items           : 'li',
    connectWith : '.menuR',  
    update      : function(event, ui){

    },
    recieve     : function(event, ui){

    }
});

如果您想在菜单之间拖放，

I see a lot of people try and use draggable/droppable when what they really need is sortable. Menus are usually unordered lists. Try converting your

<div class="menuL">

into

<ul class="menuL">

with all the

<div class="menutype"></div>

changed to

<li class="menutype"></li>

with this js code

$(".menuL").sortable({
    items           : 'li',
    connectWith : '.menuR',  
    update      : function(event, ui){

    },
    recieve     : function(event, ui){

    }
});

if you want to drag and drop between menus you could use common class for both ul elements

回复收藏 0 原文

~没有更多了~