pggonzalez

You don’t need to apologize about the documentation. You and your team are all Spanish-speaking, so it’s understandable that your documentation is in that language.

Unfortunately, my knowledge of JavaScript is very basic. I am looking at the example-idevice, and I’m still trying to understand it. At the same time, I’m playing around with the code below in a Free Text idevice. I can make draggable items and areas in which to drop them, but I’m still trying to figure out a way to make the items only go to specific areas. I think it might be useful for a teacher who wants to ask students to drag-and-drop labels on an image.

<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
<div class="exe-layout-2-cols exe-layout-2-30-70 exe-clear">
<div class="exe-col exe-col-1">
<ul ondrop="drop(event)" ondragover="allowDrop(event)" style="min-width: 100px; min-height: 100px; border: 1pt solid black; float: left; margin: 10px;">
<li draggable="true" ondragstart="drag(event)" id="drag1">Item A</li>
<li draggable="true" ondragstart="drag(event)" id="drag2">Item B</li>
<li draggable="true" ondragstart="drag(event)" id="drag3">Item C</li>
</ul>
</div>
<div class="exe-col exe-col-2">
<div id="dropA" style="width: 100px; height: 100px; border: 1pt solid black; float: left; margin: 10px;" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="dropB" style="width: 100px; height: 100px; border: 1pt solid black; float: left; margin: 10px;" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="dropC" style="width: 100px; height: 100px; border: 1pt solid black; float: left; margin: 10px;" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
</div>