Question

我正在开发一个需要大量代码的网站，其性质证明远远超过了我对JQuery的有限知识。该网站的结构如下（不太确定这是否是最佳结构，需要用它做什么，JQuery明智）：

<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中的菜单和内容类型，因为我只知道如何定义它接受的项目，而不是单独使用可拖动项目。

我不希望有人吐出必要的代码，但是会非常感谢一些指针或示例。

Answer 1

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

<div class="menuL">

进入

<ul class="menuL">

全部

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

更改为

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

使用此js代码

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

    },
    recieve     : function(event, ui){

    }
});

如果你想在菜单之间拖放，你可以使用两个ul元素的公共类

JQueryUI - 也许是一个挑战？

1 个答案: