突出显示div

Question

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

这是您调整后的代码段：

＆＃13;

＆＃13;

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

＆＃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: 160px;
    -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 class="tbDocument" draggable="true">document to drag</div>

＆＃13;

＆＃13;

＆＃13;