1

我正在一个需要大量代码的网站上工作，事实证明其性质大大超出了我对 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>

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

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

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

4

1 回答 1

0

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

<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 元素使用公共类

于 2011-05-13T18:55:23.517 回答