jquery - 拖放交换 div 位置

Question

我正在为一款点击式游戏制作拖放 list 。库存已设置，当元素被放入槽中时，它会响应该位置。

目前两个元素可以在同一个槽中，这并不理想。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 级