JQueryUI - Возможно, это вызов? - PullRequest
Новая
       13

JQueryUI - Возможно, это вызов?

1 голос
/ 08 апреля 2011

Я работаю над сайтом, на котором требуется кусок кода, характер которого значительно превосходит мои ограниченные знания 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>

Основная предпосылка заключается в том, что после того, как один из DIV "menutype" будет отброшен в пределах области сбрасывания, соответствующая структура меню раскрывается в содержимом DIV. Точно так же после удаления «тип контента» показывает встроенный контент в этом меню.

На данный момент я поставлен в тупик относительно того, как я иду к достижению этого. Моя основная проблема заключается в том, что я не знаю, как различать меню и типы контента в .droppable, так как я знаю только, как определить, какие элементы он принимает, а не то, что индивидуально делать с перетаскиваемыми элементами.

Я не ожидаю, что кто-то выложит необходимый код, но некоторые указатели или примеры будут с благодарностью.

1 Ответ

0 голосов
/ 13 мая 2011

Я вижу, что многие люди пытаются использовать перетаскиваемые / сбрасываемые объекты, когда то, что им действительно нужно, можно сортировать.Меню обычно представляют собой неупорядоченные списки.Попробуйте преобразовать 

<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

...