jquery-ui：使用可堆叠项目删除和拖动库存

Question

大家好，

我正在为我的webgame构建一个drop＆drag库存面板，但是我无法使用可堆叠元素。 我已经简化了整个库存，因此不那么容易混淆。

首先，让我解释一下我希望它如何工作：

1. 每个.item元素都可以放在任何免费的.inv_slot 。
2. 如果我尝试删除的.item上的其它元素.item不包含类.stackable ，它只会激活可拖动的revert()函数。
3. 如果我尝试删除.item上的元素.item ，做有.stackable类，它只会删除克隆/帮手。 （稍后我会添加一个只增加项目堆栈大小的函数。）

现在下面的例子出了什么问题：

1. 如果.item意外掉落在边框上或两个.inv_slot插槽之间，则不会激活还原动画。 但它确实有效，同时将.item元素放在#panel之外。

2. 此外，如果我不小心在两个.inv_slot元素之间删除.item ，它的行为就像.item被放在.stackable项目上一样。 所以它将删除克隆而不是恢复到它的上一个。 位置。 （很可能是drop：method中选择器的问题）

3. 如果我将.stackable项目放在另一个.stackable项目上，它不会刷新光标。 它似乎停留在拖动模式，激活“指针”光标。

现在这是（部分工作）的例子：

 $(document).ready(function() { //var prev_el = ''; var item_isStackable = ""; $( ".item").draggable({ scroll: true, revert: function(isValidEl) { if(isValidEl) { return false; }else{ return true; } }, helper: "clone", cursor: "pointer", stack: false, zIndex: 27, drag: function(event, ui) { item_isStackable = $(this).hasClass("stackable"); }, }); $( ".inv_slot" ).droppable({ accept: ".item", drop: function( event, ui ) { var item = $(this).find(".item"); if(item.length == 0) /// See if there any items already in the currently selected inventory slot // { console.log("Inserting"); ui.draggable.detach().appendTo($(this)); // if none, insert the item into athe free slot /// } else if(item_isStackable == true && item.hasClass("stackable")){ console.log("Increasing "); ui.draggable.detach(); /// If yes, just destroy the clone /// }else{ console.log("reverting back"); // in case it's not .inv_slot , revert the item back to it's previous position // ui.draggable.animate(ui.draggable.data().origPosition,"slow"); } } }); }); 

 #panel { width: 340px; height: 44px; border: 1px solid #000; padding: 4px; } .inv_slot { z-index: 22; position: relative; width: 40px; height: 40px; border: 1px solid red; float: left; } .inv_slot .slot_pos{ z-index: 24; position: absolute; margin-left: 50%; left: -4px; top: 2px; } .item { position: relative; z-index: 25; margin: 4px; width: 30px; height: 30px; border: 1px solid blue; } .item.stackable { border: 1px solid green; } 

 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script> <div id="panel"> <div class="inv_slot"> <div class="item stackable" ></div> <span class="slot_pos">0</span> </div> <div class="inv_slot"> <div class="item"> </div> <span class="slot_pos">1</span> </div> <div class="inv_slot"> <div class="item stackable"> </div> <span class="slot_pos">2</span> </div> <div class="inv_slot"><span class="slot_pos">3</span> </div> <div class="inv_slot"><span class="slot_pos">4</span> </div> <div class="inv_slot"><span class="slot_pos">5</span> </div> <div class="inv_slot"><span class="slot_pos">6</span> </div> <div class="inv_slot"><span class="slot_pos">7</span> </div> </div> 

我花了几个小时没有任何进展，所以如果有人可以帮我解决这个问题，我真的很感激。

先谢谢你，Alex。

Answer 1

发生的事情是当你将一个盒子拖到它旁边的边框上时，它会自行删除，因为它会尝试堆叠自己。 您需要更改if语句的第二部分：

else if(item_isStackable == true && item.hasClass("stackable") && ui.draggable.filter(function() { var d = this; return item.filter(function() { return d == this; }).length > 0; }).length === 0)

修复光标指针问题：

.item
{
    position: relative;
    z-index: 25;
    margin: 4px;
    width: 30px;
    height: 30px;
    border: 1px solid blue;
    cursor: default !important; /* Add this property. */
}

小提琴。