Question

0

161

Views

Drag and Drop data not being retained in dataTransfer object

I am trying to implement a simple drag and drop, but for some reason the data I'm storing in the dataTransfer object is not being retained. Here is my code:

function drag(ev) {
            var checker_id = ev.target.id;
            var checker_slot = ev.target.getAttribute('data-slot');
            console.log(`Starting drag with ${checker_id} from slot ${checker_slot}`);
            ev.originalEvent.dataTransfer.setData("checker-id", ev.target.id);
            ev.originalEvent.dataTransfer.setData("checker-slot", ev.target.getAttribute('data-slot'));
            var stored_id = ev.originalEvent.dataTransfer.getData("checker-id");
            var stored_slot = ev.originalEvent.dataTransfer.getData("checker-slot");
            console.log(`Just stored checker ${stored_id} from slot ${stored_slot}`);
        }

        function drag_over(ev) {
            console.log(`Drag_over event data: ${ev.originalEvent.dataTransfer.types}`);
            var checker_id = ev.originalEvent.dataTransfer.getData("checker-id");
            var checker_slot = ev.originalEvent.dataTransfer.getData("checker-slot");
            console.log(`Drag_over with checker ${checker_id} from slot ${checker_slot}`);
        }   
    
        $("#checker-1").on('dragstart', drag);
        $("#slot-2").on('dragover', drag_over);

.slot {
            width: 100px;
            height: 100px;
            margin: 100px;
            border: 2px solid black;
        }
        
        .checker {
            width: 50px;
            height: 50px;
            background: blue;
            
    }

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>

<div class="slot" id="slot-1">
        <div class="checker" id="checker-1" data-slot="slot-1" draggable="true">
</div>
<div class="slot" id="slot-2"></div>

I would expect the output to the console to be the following:

Starting drag with checker-1 from slot slot-1
Just stored checker checker-1 from slot slot-1
Drag_over event data: checker-id,checker-slot
Drag_over with checker checker-1 from slot slot-1

Instead, the last log statement is:

Drag_over with checker from slot

For some reason, it's retaining the keys I store in the dataTransfer object but not the values. I can't figure out what I'm doing wrong.

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-05T06:03:20.486Z

I noticed you were missing a DIV close tag. This corrected code appears to work:

function drag(ev) {
  var checker_id = ev.target.id;
  var checker_slot = ev.target.getAttribute('data-slot');
  console.log(`Starting drag with ${checker_id} from slot ${checker_slot}`);
  ev.originalEvent.dataTransfer.setData("checker-id", ev.target.id);
  ev.originalEvent.dataTransfer.setData("checker-slot", ev.target.getAttribute('data-slot'));
  var stored_id = ev.originalEvent.dataTransfer.getData("checker-id");
  var stored_slot = ev.originalEvent.dataTransfer.getData("checker-slot");
  console.log(`Just stored checker ${stored_id} from slot ${stored_slot}`);
}

function drag_over(ev) {
  console.log(`Drag_over event data: ${ev.originalEvent.dataTransfer.types}`);
  var checker_id = ev.originalEvent.dataTransfer.getData("checker-id");
  var checker_slot = ev.originalEvent.dataTransfer.getData("checker-slot");
  console.log(`Drag_over with checker ${checker_id} from slot ${checker_slot}`);
}

$("#checker-1").on('dragstart', drag);
$("#slot-2").on('dragover', drag_over);

.slot {
  width: 100px;
  height: 100px;
  margin: 100px;
  border: 2px solid black;
}

.checker {
  width: 50px;
  height: 50px;
  background: blue;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>

<div class="slot" id="slot-1">
  <div class="checker" id="checker-1" data-slot="slot-1" draggable="true">
  </div>
</div>
<div class="slot" id="slot-2"></div>

You might also consider the following.

$(function() {
  $(".checker").draggable();
  $(".slot").droppable({
    accept: ".checker",
    drop: function(event, ui) {
      ui.draggable.appendTo(this).attr("style", "");
      console.log("Got " + ui.draggable.attr("id"));
    }
  });
});

.slot {
  width: 100px;
  height: 100px;
  margin: 100px;
  border: 2px solid black;
}

.checker {
  width: 50px;
  height: 50px;
  background: blue;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

<div class="slot" id="slot-1">
  <div class="checker" id="checker-1" data-slot="slot-1" draggable="true">
  </div>
</div>
<div class="slot" id="slot-2"></div>

0

161

Drag and Drop data not being retained in dataTransfer object

1 answers

0

Find remote jobs

Andres GPT