JQuery несколько дивы Подвижные, закрывающиеся

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 коробки, перемещать их и закрывать их, когда я нажимаю на закрытии < «а»> (без ""). Должна быть возможность открывать коробки рядом друг с другом и (например, «комнаты, инвентарь, магазин», но не «комнаты, комнаты, комнаты»).

Вот Навигация:

<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> 

Раскрыты коробки в < "главный"> (без ""), как это:

 <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(); 
});