2

Estou utilizando o exemplo fornecido no site da w3schools, para gerar um Drag/Drop com duas colunas(DIV). Os objetos que serão movidos entre essas DIV's estão identificados pelos IDs de 1 a 5.

Até aqui esta tudo esta funcionando como deveria, o problema ocorre no momento que o usuário move um item sobre o outro.

EX: O usuário arrasta o item de ID 1 e solta sobre o item de ID 2, ao invés de ser passado o ID da DIV e pego o ID do elemento P.

resultado do log:

Correto:
ITEM: 1 - COLUNA: DIV2

Errado:
ITEM: 2 - COLUNA: 1

Gostaria de saber se e possível bloquear o elemento P para que ele não seja alvo do drop, ou para pegar o ID da DIV mesmo o item sendo solto sobre outro 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>

2 Respostas 2

1

Não é necessário importar libs inteiras como jQuery e jQuery-UI, basta checar no drop quem é o elemento que esta recebendo o evento dragover, assim:

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

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

O ["DIV1", "DIV2"].indexOf(ev.target.id) === -1 verifica se o id é DIV1 ou DIV2, caso contrário ele não move.

segue exemplo:

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>


No entanto se você deseja que seja dropado no elemento que tiver ondragover mesmo que solto em cima de outro sub-elemento você pode trocar na função drop o event.target por event.currentTarget, assim:

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);
}

Particularmente eu creio que assim fica bem melhorar para o usuário final, exemplo:

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>

-1

Problema pode ser resolvido utilizando o exemplo abaixo:

Fonte original: http://embed.plnkr.co/WcIZlD/

	$(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>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    
  </head>

  <body>
   <div class="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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .