jquery on drop 函数不起作用
Posted
技术标签:
【中文标题】jquery on drop 函数不起作用【英文标题】:jquery on drop function doesnt work 【发布时间】:2018-12-17 13:58:15 【问题描述】:我正在为我的 javascript 游戏创建库存系统,我遇到了我的第一个问题。这是我的 html 和 JavaScript 代码:
HTML
<div class="body backpack">
<div class="itemSlot">
<div class="item" draggable="true">
<svg viewBox="0 0 24 24">
<path d="M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M13,17H11V15H13V17M13,13H11V7H13V13Z"></path>
</svg>
<div class="itemInfo">
<h4>Wooden Sword</h4>
<p>Lorem </p>
</div>
</div>
</div>
<div class="itemSlot"></div>
<div class="itemSlot"></div>
<div class="itemSlot"></div>
<div class="itemSlot"></div>
<div class="itemSlot"></div>
<div class="itemSlot"></div>
<div class="itemSlot"></div>
<div class="itemSlot"></div>
<div class="itemSlot"></div>
<div class="itemSlot"></div>
<div class="itemSlot"></div>
<div class="itemSlot"></div>
<div class="itemSlot"></div>
<div class="itemSlot"></div>
<div class="itemSlot"></div>
<div class="itemSlot"></div>
<div class="itemSlot"></div>
<div class="itemSlot"></div>
<div class="itemSlot"></div>
</div>
JavaScript
$(document).ready(function()
var draggedItem;
$(".item").on("dragstart", function(ev)
draggedItem = this;
console.log(draggedItem)
)
$(".itemSlot").on("dragover", function(ev)
console.log("You can drop it here!")
)
$(".item").on("drop", function(ev)
console.log("test")
)
);
您可以在此处https://codepen.io/anon/pen/oMvQgQ?editors=1111 看到正在运行的代码。
当我拖动项目时,它 console.logs
正确,当我将拖动器项目悬停在可放置插槽上时,它 console.logs
也正确,但是当我放下项目时,它 不 console.log
任何东西。
我不知道我做错了什么。
谢谢你,祝你有美好的一天。 :)
【问题讨论】:
***.com/questions/21339924/… jQuery.on("drop") not firing的可能重复 谢谢,但这并没有解决我的问题。我希望 .itemSlot 成为可以删除 .item 的地方。 【参考方案1】:您可能正在寻找 dragstop 事件:
$(".item").on("dragstop", function(ev)
console.log("test")
)
http://api.jqueryui.com/draggable/#event-stop
【讨论】:
感谢您的回答,但我没有 JqueryUI【参考方案2】:$(document).ready(function()
var draggedItem;
$(".item").on("dragstart", function(ev)
draggedItem = this;
console.log(draggedItem)
)
$(".itemSlot").on("dragover", function(ev)
event.preventDefault();
console.log("You can drop it here!")
)
$(".item").on("drop", function(ev)
console.log("test")
)
);
【讨论】:
以上是关于jquery on drop 函数不起作用的主要内容,如果未能解决你的问题,请参考以下文章
jQuery on() stopPropagation 不起作用?
jquery - 使用 $(document).on('play', 'video', function()) 时播放不起作用