问题描述
在将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>
1楼
pschueller
0
已采纳
2015-07-26 14:09:15
您的命名空间语法错误，并且您没有包含.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>