HTML5 Drag and Drop

Navigation
1

I'm using the example provided on the w3schools site to generate a two-column Drag / Drop (DIV ). The objects that will be moved between these DIVs are identified by the IDs from 1 to 5.

So far everything is working as it should, the problem occurs when the user moves one item over the other.

EX: The user drags the ID item 1 and drops over the ID item 2, instead of being passed the ID of the DIV and takes the ID of the P element.

log result: 

Correto:
ITEM: 1 - COLUNA: DIV2

Errado:
ITEM: 2 - COLUNA: 1

I would like to know if it is possible to block the P element so that it is not targeted by the drop, or to get the ID of the DIV even if the item is dropped on another item. 

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));
	
	console.log("ITEM: " + data + " - COLUNA: " + ev.target.id);
}
#DIV1, #DIV2 {
    float: left;
    width: 150px;
    height: 400px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}
p {
color:red
}
<div id="DIV1" ondrop="drop(event)" ondragover="allowDrop(event)">
<h3><center>INICIO</center></h3>
<hr>
    <p draggable="true" ondragstart="drag(event)" id="1">UM</p>
    <p draggable="true" ondragstart="drag(event)" id="2">DOIS</p>
    <p draggable="true" ondragstart="drag(event)" id="3">TRES</p>
    <p draggable="true" ondragstart="drag(event)" id="4">QUATRO</p>
    <p draggable="true" ondragstart="drag(event)" id="5">CINCO</p>
</div>

<div id="DIV2" ondrop="drop(event)" ondragover="allowDrop(event)">
<h3><center>MEIO</center></h3>
<hr>
</div>
    
asked by anonymous 27.11.2017 / 18:14

2 answers

-1

Problem can be solved using the example below:

Original source: link 

	$(document).ready(function() {

  $('.box-item').draggable({
    cursor: 'move',
    helper: "clone"
  });

  $("#INICIO").droppable({
    drop: function(event, ui) {
      var itemid = $(event.originalEvent.toElement).attr("itemid");
      $('.box-item').each(function() {
        if ($(this).attr("itemid") === itemid) {
          $(this).appendTo("#INICIO");
		  console.log("ITEM: " + itemid + " - COLUNA: INICIO");
        }
      });
    }
  });
  
    $("#MEIO").droppable({
    drop: function(event, ui) {
      var itemid = $(event.originalEvent.toElement).attr("itemid");
      $('.box-item').each(function() {
        if ($(this).attr("itemid") === itemid) {
          $(this).appendTo("#MEIO");
		  console.log("ITEM: " + itemid + " - COLUNA: MEIO");
        }
      });
    }
  });
  
    $("#FIM").droppable({
    drop: function(event, ui) {
      var itemid = $(event.originalEvent.toElement).attr("itemid");
      $('.box-item').each(function() {
        if ($(this).attr("itemid") === itemid) {
          $(this).appendTo("#FIM");
		  console.log("ITEM: " + itemid + " - COLUNA: FIM");
        }
      });
    }
  });


});
/* Styles go here */

.box-container {
	height: 200px;
}

.box-item {
	width: 100%;
	z-index: 1000
}
<!DOCTYPE html>
<html>

  <head>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" />
    
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script><scripttype="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script></head><body><divclass="container-fluid">
      <div class="row">
        <div class="col-xs-3">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h1 class="panel-title">INICIO</h1>
            </div>
            <div id="INICIO" class="panel-body box-container">
              <div itemid="itm-1" class="btn btn-default box-item">Item 1</div>
              <div itemid="itm-2" class="btn btn-default box-item">Item 2</div>
              <div itemid="itm-3" class="btn btn-default box-item">Item 3</div>
              <div itemid="itm-4" class="btn btn-default box-item">Item 4</div>
              <div itemid="itm-5" class="btn btn-default box-item">Item 5</div>
            </div>
          </div>
        </div>
        <div class="col-xs-3">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h1 class="panel-title">MEIO</h1>
            </div>
            <div id="MEIO" class="panel-body box-container"></div>
          </div>
        </div>
		<div class="col-xs-3">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h1 class="panel-title">FIM</h1>
            </div>
            <div id="FIM" class="panel-body box-container"></div>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>
    
29.11.2017 / 12:23
0

You do not need to import entire libs like jQuery and jQuery-UI , just check the drop which element is receiving the% / p> 

function drop(ev) {
    ev.preventDefault();

    if (["DIV1", "DIV2"].indexOf(ev.target.id) === -1) {
        return;
    }

The dragover checks whether the id is DIV1 or DIV2, otherwise it does not move.

follow example: 

function allowDrop(ev) {
    ev.preventDefault();
}

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

function drop(ev) {
    ev.preventDefault();

    if (["DIV1", "DIV2"].indexOf(ev.target.id) === -1) {
        return;
    }

    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
    
    console.log("ITEM: " + data + " - COLUNA: " + ev.target.id);
}
#DIV1, #DIV2 {
    float: left;
    width: 150px;
    height: 400px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}
p {
   color:red
}
<div id="DIV1" ondrop="drop(event)" ondragover="allowDrop(event)">
<h3><center>INICIO</center></h3>
<hr>
    <p draggable="true" ondragstart="drag(event)" id="1">UM</p>
    <p draggable="true" ondragstart="drag(event)" id="2">DOIS</p>
    <p draggable="true" ondragstart="drag(event)" id="3">TRES</p>
    <p draggable="true" ondragstart="drag(event)" id="4">QUATRO</p>
    <p draggable="true" ondragstart="drag(event)" id="5">CINCO</p>
</div>

<div id="DIV2" ondrop="drop(event)" ondragover="allowDrop(event)">
<h3><center>MEIO</center></h3>
<hr>
</div>

However if you want to be dropped on the element that has ["DIV1", "DIV2"].indexOf(ev.target.id) === -1 even if dropped on top of another sub-element you can change in function ondragover drop event.target , like this: 

function drop(ev) {
    ev.preventDefault();

    var data = ev.dataTransfer.getData("text");
    ev.currentTarget.appendChild(document.getElementById(data));

    console.log("ITEM: " + data + " - COLUNA: " + ev.currentTarget.id);
}

Particularly I believe that this is good for the end user, for example: 

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.currentTarget.appendChild(document.getElementById(data));
    
    console.log("ITEM: " + data + " - COLUNA: " + ev.currentTarget.id);
}
#DIV1, #DIV2 {
    float: left;
    width: 150px;
    height: 400px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}
p {
   color:red
}
<div id="DIV1" ondrop="drop(event)" ondragover="allowDrop(event)">
<h3><center>INICIO</center></h3>
<hr>
    <p draggable="true" ondragstart="drag(event)" id="1">UM</p>
    <p draggable="true" ondragstart="drag(event)" id="2">DOIS</p>
    <p draggable="true" ondragstart="drag(event)" id="3">TRES</p>
    <p draggable="true" ondragstart="drag(event)" id="4">QUATRO</p>
    <p draggable="true" ondragstart="drag(event)" id="5">CINCO</p>
</div>

<div id="DIV2" ondrop="drop(event)" ondragover="allowDrop(event)">
<h3><center>MEIO</center></h3>
<hr>
</div>
    
29.11.2017 / 12:38
Disable field if other is filled How to map REST request response