拖放交換div位置

我正在做一個點擊遊戲的拖放庫存。廣告資源已設置完畢，並且某個商品在某個廣告位中投放時，會回覆該位置。拖放交換div位置

兩個項目目前可以在同一個槽位，這並不理想。 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; 
}

來源

2016-03-01 Yamada Akira

我不知道如果我得到你的權利......

將拖放到清單中。
預謀放置項目現有庫存項目列表
排序庫存項目列表的頂部有新放置項目，置換其他項目1個降壓

來源

2016-03-01 20:08:33 bmatovu

拖放部分已設置。分揀應該與物品已經在庫存內的地點進行切換。外面的物品應該落在下一個空閒位置。所以如果插槽1被佔用，新的項目應該落在插槽2中。 –

拖放交換div位置

回答

相關問題