jquery on drop function doesnt work

Question

I'm creating inventory system for my JavaScript game and I reached my first issue. Here is my HTML and JavaScript code:

HTML

<div class="body backpack">
  <div class="itemSlot">
    <div class="item" draggable="true">
      <svg width="24" height="24" 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")
    })
});

You can see the code in action here https://codepen.io/anon/pen/oMvQgQ?editors=1111.

When I drag item, it console.logs correctly, when I hover with dragger item over droppable slot, it console.logs correctly too, but when I drop the item, it doesnt console.log anything.

I have no idea what I'm doing wrong.

Thank you and have a nice day. :)

https://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome — epascarello, Jul 09 '18 at 19:56
Possible duplicate of [jQuery.on("drop") not firing](https://stackoverflow.com/questions/19223352/jquery-ondrop-not-firing) — Heretic Monkey, Jul 09 '18 at 20:05
Thanks but that didnt solve my issue. I want .itemSlot to be place where .item can be dropped. — Kyrbi, Jul 09 '18 at 20:11

score 0 · Answer 1 · answered Jul 09 '18 at 20:46

0

You might be looking for the dragstop event:

$(".item").on("dragstop", function(ev){
    console.log("test")
})

http://api.jqueryui.com/draggable/#event-stop

answered Jul 09 '18 at 20:46

ChekTek

175
2
10

Thanks for answer but I dont have JqueryUI – Kyrbi Jul 09 '18 at 21:17

score 0 · Answer 2 · answered Jul 09 '18 at 22:54

$(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 function doesnt work

2 Answers2