- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
大家好,
我正在为我的网页游戏构建一个拖放库存面板,但我无法使其与可堆叠元素一起使用。我简化了整个 list ,以减少混淆。
首先,让我解释一下我希望它如何工作:
.item
元素都可以放在任何空闲的 .inv_slot
上。.item
元素放在另一个不包含类 .stackable
的 .item
上,它只会激活draggable 的 revert()
函数。 .item
元素放在具有 .stackable
类的 .item
上,它只会删除克隆/助手。 (稍后我将添加一个仅增加项目堆栈大小的函数。) 下面的例子有什么问题:
如果 .item
意外掉落在边框上或两个 .inv_slot
插槽之间,则不会激活恢复动画。但是,它确实有效,同时将 .item 元素放在 #panel
之外。
此外,如果我不小心将 .item
放在两个 .inv_slot
元素之间,它的行为就好像 .item
是放在 .stackable
项上。所以它会删除克隆而不是恢复到它的前一个。位置。 (很可能是 drop: 方法中的选择器有问题)
如果我将一个 .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>
我已经花了几个小时没有任何进展,所以如果有人能帮助我解决这个问题,我将不胜感激。
提前致谢,亚历克斯。
最佳答案
发生的事情是,当您将一个框拖到它旁边的边框上时,它会自行删除,因为它会尝试堆叠自己。您需要更改 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. */
}
关于javascript - jquery-ui : drop&drag inventory with stackable items,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26759529/
我正在使用 gfx-hal,这需要我创建需要使用特定于其类型的函数显式销毁的资源。我想将这些类型的实例存储在结构中,并且我还想将清理它们与拥有结构的生命周期相关联,而不是手动管理它们的生命周期并可能在
关闭。这个问题需要details or clarity .它目前不接受答案。 想改进这个问题吗? 通过 editing this post 添加细节并澄清问题. 关闭 7 年前。 Improve
我知道这一定是非常明显的事情,但我不明白。我有两个 div,一个可拖动,另一个带有 on:drop,当我将可拖动的 div 放到它上面时,它似乎没有被调用。我错过了什么? 回复:https://sve
在下面的应用程序中,从未调用 drop 方法。放置目标 ( div2 ) 由 dragEnter 和 dragOver 事件中的取消事件指示,但不触发放置。 HTML 和 .dart 如下:
我已经使用 ng2 文件上传实现了文件删除。我面临的问题是,当文件被拖放到拖放区域之外时,浏览器会打开它。有什么办法可以防止这种事件发生吗? Angular 2/4 最佳答案 是的,终于成功了。我希望
我是使用rust 的新手。我的简单代码 struct Foo{ data : & 'a String, } fn test_foo(){ let s1:String = String::
我希望 image.src 显示 id,而不是每个 的值。 drop.id 存在吗?这可以做到吗?或者id被锁定在中?当用户点击提交时,我需要传递表单中的值。 function swapImage
我正在使用一个数据框,我必须将两列(定量和销售)添加然后删除它们,然后将列名称的第一个字母大写。问题是当我使用 drop 时,它会将其保存到另一个数据帧。从文档来看,问题来自 inplace=fals
我想让 Drop left 而不是在 bootstrap 下拉按钮中下拉。我正在努力实现这一点,但我无法做到这一点,有人可以指导我这样做吗? 这是我的代码 Small button
我在使用 Blazor 时遇到了一个奇怪的问题... 我有一个使用拖放功能的应用程序,它使用 .Net Core 3.1 运行良好。然而,无论我做什么,drop 事件现在都不会被解雇,我不知道为什么。
我希望能够移动(在灰色背景上,通过拖放)Bootstrap 2 提供的模态表单。谁能告诉我实现此目的的最佳实践是什么? 最佳答案 默认情况下, Bootstrap 不附带任何拖放功能,但您可以添加一些
我试图在拖放过程中更改节点上的光标,但图像没有改变。我打电话 setCursor()在 DragDetectedEventHandler我的节点。我也试过调用 getParent().setCurso
我刚刚注意到您可以在 PostgreSQL 中编写两者。有什么区别还是只是“简化”的语法。据我所知,这两者的作用完全相同。 ALTER TABLE table DROP my_column; 对比 A
我将屏幕分为两个 DIV。在左侧的 DIV 中,我有一些 50x50 像素的 DIV,在右侧的 DIV 中,我有一个由 80x80 LI 组成的空网格 。左侧的 DIV 是可拖动的,一旦放到 LI 上
我正在使用这个库 Drop ,但是记录很差,我不明白如何使用它。首先我安装了: npm install tether-drop 我已经下载了 Drop.js,然后用 Tether 导入它(导入所有内容
我想使用 jQuery 处理拖放 HTML 5 功能。直到没有触发 drop 事件为止都可以。看看我的代码: A B C $('#columns .column').on({
我需要使用 mysqldump 和 replace 而不是 insert 并且在恢复时不删除数据库和表。但我需要删除并重新创建触发器和存储过程 为此,我将 mysqldump 与 --replace
在 CD 管道中,我使用下载构建工件任务将工件下载到目标目录。我的发布工件目录结构如下 drop --> 来源 --> abc.zip 现在的问题是,每当我下载工件时,它都会下载整个放置文件夹并将相同
您好,我正在开发拖放应用程序。我有一个可以沿着文档拖动的 DIV,并且文档中还有其他一些 div,我可以将一个 div 拖到其他 div,这会使页面变得困惑它在空的地方并禁用另一个 div 中的放置,
我有以下代码: $(".dropzone").on("dragover", function(ev) { ev.preventDefault();
我是一名优秀的程序员,十分优秀!