javascript - 在放置时突出显示 div

Question

我想在将元素放入其中后突出显示一个 div。如何识别我将元素拖到的 div 并突出显示它？

在我的程序中，下面的代码有效，但在此代码片段中无效。在这里我不能拖动 div，尽管我将它们设置为可拖动。我做错了什么？

var overviewJS = new function() {
  this.allowDrop = function(ev) {
    ev.preventDefault();
  }
  this.drag = function(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
  }
  this.drop = function(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    //$('.tbProject').append("Some content");
    $('.tbProject').effect("highlight", {}, 3000);
  }
}

.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: 160px;
  -webkit-user-drag: element;
}

<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 class="tbDocument" draggable="true">
  document to drag
</div>

Answer 1

您的命名空间语法错误，您没有包含 .effect() 所需的 jQuery UI。然后要特别突出显示放置目标，请使用 ev.target。

这里是您调整后的代码段:

overviewJS = {
    allowDrop: function (ev) {
        ev.preventDefault();
    },
    drag: function (ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    },
    drop: function (ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        //$('.tbProject').append("Some content");
        $(ev.target).effect("highlight", {}, 3000);
    }
}

.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: 160px;
    -webkit-user-drag: element;
}

<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 class="tbDocument" draggable="true">document to drag</div>