javascript - jquery-ui : drop&drag inventory with stackable items

Question

大家好，

我正在为我的网页游戏构建一个拖放库存面板，但我无法使其与可堆叠元素一起使用。我简化了整个 list ，以减少混淆。

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

1. 每个 .item 元素都可以放在任何空闲的 .inv_slot 上。
2. 如果我尝试将一个 .item 元素放在另一个不包含类 .stackable 的 .item 上，它只会激活draggable 的 revert() 函数。
3. 如果我尝试将 .item 元素放在具有 .stackable 类的 .item 上， 它只会删除克隆/助手。 (稍后我将添加一个仅增加项目堆栈大小的函数。)

下面的例子有什么问题:

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

2. 此外，如果我不小心将 .item 放在两个 .inv_slot 元素之间，它的行为就好像 .item 是放在 .stackable 项上。所以它会删除克隆而不是恢复到它的前一个。位置。 (很可能是 drop: 方法中的选择器有问题)

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>

我已经花了几个小时没有任何进展，所以如果有人能帮助我解决这个问题，我将不胜感激。

提前致谢， 亚历克斯。

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

Fiddle.