Drag & drop swap div places

Question

Я занимаюсь перетаскиванием инвентаря для игры с точками и щелчками. Реестр настроен, и когда предмет отбрасывается в слот, он отвечает на это место.

В настоящее время два предмета могут находиться в одном слоте, что не является идеальным. 1. Что я хочу, так это то, что когда элемент внутри инвентаря выпадает на уже занятый слот, элементы должны переключаться между собой. И 2. Когда предмет, находящийся за пределами инвентаря, падает внутри, он должен приземлиться в первом открытом слоте.

Это мой код:

$(document).ready(function(){ 

    $('.item').draggable({ 
     accept: ".item", 
     containment: '#container', 
     cursor: 'pointer', 
     revert: function(is_valid_drop){ 
       console.log("is_valid_drop = " + is_valid_drop); 
       if(!is_valid_drop){ 
        console.log("revert triggered"); 
        return true; 
       } else { 
        //Annat 
       } 
      } 
     }); 

    $('.slot').droppable({ 
     drop: function(event, ui) { 
      var $this = $(this); 
      $this.append(ui.draggable); 

      var width = $this.width(); 
      var height = $this.height(); 
      var cntrLeft = width/2 - ui.draggable.width()/2; 
      var cntrTop = height/2 - ui.draggable.height()/2; 

      ui.draggable.css({ 
       left: cntrLeft + "px", 
       top: cntrTop + "px" 
      }); 
     } 
    }); 

}); 

HTML

<div id="container"> 
     <div class="item" id="key"></div> 
     <div class="item" id="key2"></div> 

     <div id="inventory"> 
      <div class="slot"></div> 
      <div class="slot"></div> 
     </div> 
    </div> 

CSS

/* GENERAL STYLE */ 
body{ 
    margin:0; 
    padding:0; 
} 
#container{ 
    position:relative; 
    width:667px; 
    height:375px; 
    background-color:#999; 
} 


/* GENERAL BUTTONS SETTINGS */ 


/* STYLE */ 
/* GENERAL ITEM SETTINGS */ 
.item{ 
    position:absolute; 
} 
/* ITEM IDs AND THEIR STYLING */ 
#key, #key2{ 
    width:20px; 
    height:20px; 
    cursor:pointer; 
    z-index:10; 
} 
#key{ 
    background-color:gold; 
    left:230px; 
    top:100px; 
} 
#key2{ 
    background-color:silver; 
    left:252px; 
    top:100px; 
} 
#inventory{ 
    position:absolute; 
    bottom:0; 
    left:0; 
    right:0; 
    margin-left:auto; 
    margin-right:auto; 
    width:160px; 
    height:50px; 
    background-color:green; 
    z-index:1; 
} 
.slot{ 
    position:relative; 
    float:left; 
    border-left:1px solid #000; 
    border-right:1px solid #000; 
    width:78px; 
    height:50px; 
    z-index:2; 
} 

Answer 1

Я не знаю, если я вас правильно ...

• Перетащите предмет в инвентарь.

• предваряется упал пункт к списку существующих пунктов инвентаризации

• Сортировка инвентарного список пункта, чтобы вновь упал элемент в верхней части, вытесняет другие пункты 1 шаг вниз