1

私は、コードのチャンクを必要とする Web サイトに取り組んでいます。その性質は、私の限られた 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 の 1 つがドロップ可能領域内にドロップされると、対応するメニュー構造がコンテンツ 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 に答える