拖放交换 div 位置答案

【问题标题】：Drag & drop swap div places拖放交换 div 位置
【发布时间】：2016-03-01 19:55:36
【问题描述】：

我正在为点击式游戏制作拖放库存。物品栏已设置好，当物品放入插槽时，它会响应该位置。

两个项目目前可以在同一个插槽中，这并不理想。 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;
}

【问题讨论】：

标签： jquery html css jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

我不知道我说的对不对……

将项目拖放到库存中。
Prepended 将物品放到现有库存物品列表中
对库存进行排序项目列表以将新丢弃的项目置于顶部，将其他项目向下替换 1 步

【讨论】：

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