JQueryUI - A Challenge perhaps?_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-23 05:52 出处：网络

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 th

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){
              开发者_JAVA技巧  $(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.

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