Jquery 拖放；直接交换div位置

我正在为点击式游戏做一个拖放清单。建立库存，当一个项目被放入一个插槽时，它将响应该位置

目前，两个项目可能位于同一个插槽中，这并不理想。 1.我想要的是，当库存中的一个项目被放置在已经占用的插槽中时，这些项目应该相互交换位置。 二,。当库存之外的物品被放入内部时，它应该落在第一个打开的插槽中

这是我的代码：

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

---

我不知道我对你的理解是否正确

• 将项目拖放到库存中

• 预先将已删除的项目添加到现有库存项目列表中

• 对库存进行排序项目列表，使新删除的项目位于顶部，将其他项目向下移动1步

---

拖放部分已设置。分拣应与库存中已存在的项目交换位置。外部项目应落在下一个空闲插槽中。因此，如果插槽1被占用，则新项目应落在插槽2中。

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

/* 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;
}