拖放交换div位置

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个降压