Question

尝试在来自数据库的一系列div上使用jQuery的sortable.js，但在尝试拖放时没有任何反应！

JS代码：

<script>
    $(function() {
    $( ".menu" ).sortable({
    items:'.menuSort'
        });
    });
</script>

正文代码：

 <div class="menu">
    <?php
    foreach($data as $head){
    ?>
    <div id="header_<?php echo $head->id ?>" class="menuSort">
        <h2 class="menuHeadTitle">
            <?php 
            echo $head->name;
            ?>
        </h2>
        <p class = "menuHeadDescription">
            <?php 
            echo $head->description;
        ?>
        </p>
        <br/>
        <div class="menuHeadItems">
            <?php
            foreach($head->items as $item){
            ?>
                <div class="menuItem";
                    <p class="itemName">
                        <?php 
                        echo $item->name;
                        ?>
                    </p>
                    <p class="itemPrice">
                        <?php 
                        echo $item->price;
                        ?>
                    </p>
                    <p class="itemDescription">
                        <?php 
                        echo $item->description;
                        ?>
                    </p>
                    <br/>
                </div>
            <?php 
            }
            ?>
        </div>
    </div>
    <?php 
    }
    ?>  
</div>

该页面用于餐馆菜单：每个标题（Starter，Main等）应该有一个div，每个标题下的每个菜都有一个嵌套的div。我正在尝试（现在）让标题可排序，并希望将菜肴排序，但是当点击并拖动任何标题div时没有发生任何事情（好吧，我正在选择文本 - 但这不是真的是什么我想要）。

尝试过jQuery 1.11和1.10都无济于事。

编辑：认为它可能与z轴有关，但我试图在z-xis上将标题div推到10000但仍然没有结果。

编辑2：小提琴在这里：http://jsfiddle.net/SBN84/

Answer 1

建立在你的小提琴上，这是一个updated fiddle。你基本上需要选择一个jquery版本，jquery ui。请注意，>不是必需的。

$(function () {
    $(".menu").sortable({
        items: '> .menuSort'
    });
});

jQuery可以在div上工作

1 个答案: