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

小提琴。