Question

我在下面添加了一个代码片段。我有id-div的div容器，我可以拖到其他div对象上。

我的目标是将draggables的ID添加到它添加的div-container中。看起来我必须在drop函数中添加UI，但我不知道如何在ondrop调用中执行此操作。什么是正确的解决方案？

＆＃13;

var overviewJS = new function() {
  this.allowDrop = function(ev) {
    ev.preventDefault();
	$(ev.target).bind('dragover', function(){
      	$(this).addClass('drag-over');
   	});
   	$(ev.target).bind('dragleave', function(){
       	$(this).removeClass('drag-over');
   	});
  }
  this.drag = function(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
  }
  this.drop = function(ev) {
    ev.preventDefault();
  	var data = ev.dataTransfer.getData("text");
  	$(ev.target).removeClass('drag-over');
  	$(ev.target).effect("highlight", {color: '#b1b1b1'}, 1000);
  }
}

＆＃13;

.tbDocument {
  background-color: grey;
  border: 1px solid #412418;
  border-radius: 2px;
  width: 120px;
}
.tbProject {
  width: 40px;
  height: 20px;
  border: 1px solid #412418;
  border-radius: 2px;
}
[draggable] {
  cursor: move;
  padding: 10px 20px;
  background-color: #666;
  border: 2px dashed #eee;
  margin: 10px 0;
  color: white;
  width: 120px;
  -webkit-user-drag: element;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div class="tbProject" ondrop="overviewJS.drop(event)" ondragover="overviewJS.allowDrop(event)">
  <center>test</center>
</div>
<div class="tbProject" ondrop="overviewJS.drop(event)" ondragover="overviewJS.allowDrop(event)">
  <center>test</center>
</div>
<div class="tbProject" ondrop="overviewJS.drop(event)" ondragover="overviewJS.allowDrop(event)">
  <center>test</center>
</div>
<br>
<br>
<div id="1" class="tbDocument" draggable="true">
  document to drag
</div>
<div id="2" class="tbDocument" draggable="true">
  document to drag
</div>
<div id="3" class="tbDocument" draggable="true">
  document to drag
</div>

＆＃13;

＆＃13; 如果我在ondrop方法中尝试overviewJS.drop(event,ui)，我会收到一个错误，即未定义UI。

Answer 1

答案是添加ondragstart="overviewJS.drag(event)"此方法设置一个稍后可以接收的变量。

 <div id="3" class="tbDocument" ondragstart="overviewJS.drag(event)" draggable="true">
 document to drag
</div>

使用Jquery和ondrop接收可拖动的ID

1 个答案: