Question

大家好，

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

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

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

以下示例现在出了什么问题：

如果.stackable意外掉落在边框上或两个.item个广告位之间，则不会激活还原动画。但它确实有效，同时将.item元素放在.inv_slot。
此外，如果我在两个#panel元素之间意外删除了.item，则其行为就像.inv_slot上的.item被删除一样。所以它将删除克隆而不是恢复到它的上一个。位置。（很可能是drop：method中选择器的问题）
如果我将.stackable项目放在另一个.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;
}

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

提前致谢，亚历克斯。

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.

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

1 个答案: