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

拖拽放弃交换div的地方

1 个答案: