javascript - JQuery多个div可移动，可关闭

Question

我的 JQuery 有问题:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
        $(function() {
            $(".box").draggable({cancel: ".box-content"});
            $(".close").click(function(){
                $(this).parent().parent().hide();
            });
            $("li[rel='nav']").click(function(){
                purl = $(this).attr('href');
                $.ajax({url:purl, success: function(data){
                    $("main").append(data);
                }});
            });
            $( "div" ).disableSelection();
        });
    </script>

它应该打开 div 框，移动它们并在我单击关闭 <"a">(没有 "")时关闭它们。应该可以打开彼此相邻的盒子(例如“房间、库存、商店”，而不是“房间、房间、房间”)。

这就是导航:

<ul class="navigation-bar">
            <li href="include/rooms.php" class="rooms" rel="nav"></li>
            <li href="include/inventory.php" class="inventory" rel="nav"></li>
            <li href="include/shop.php" class="shop" rel="nav"></li>
            <li href="include/friends.php" class="friends" rel="nav"></li>
            <li href="include/customize.php" class="customize" rel="nav"></li>
            <li href="include/purse.php" class="purse" rel="nav"></li>
            <li href="include/news.php" class="news" rel="nav"></li>
            <li href="include/help.php" class="help" rel="nav"></li>
            <li href="logout.php" class="logout"></li>
        </ul>

框在 <"main"> 中打开(没有 "")，如下所示:

        <div id="rooms" class="box box-mid">
            <div class="box-headline blue">
                Navigation
                <a href="#" id="close" class="close"></a>
            </div>  
            <div class="box-content">
                Choose a room to enter or make your own room!       
            </div>  
        </div>

Answer 1

试试这个

$(function() {
    $(".box").draggable({cancel: ".box-content"});
    $(".close").click(function(){
        $(this).parent().parent().hide();
    });
    $("li[rel='nav']").click(function(){
        purl = $(this).attr('href');
        $.ajax({url:purl, success: function(data){
            $("main").append(data);
            $(".box").draggable("destroy");
            $(".box").draggable({cancel: ".box-content"});
            $(".close").unbind('click').click(function(){
                $(this).parent().parent().hide();
            });
        }});
    });
    $( "div" ).disableSelection();
});