删除其他元素时更改元素的边框颜色答案

【问题标题】：Change border color of element when other element is dropped删除其他元素时更改元素的边框颜色
【发布时间】：2017-07-13 19:10:29
【问题描述】：

将另一个元素拖放到其中后，我在更改 div 元素的边框时遇到了问题。

这是一个 jsfiddle https://jsfiddle.net/0w2xagxc/

我已经尝试过了，但是如果我实现它，它就会停止使元素可放置。

var drop1 = document.getElementById('drop1');
drop1.ondrop = function(){
        if (event.target.id == 'tier-one'){
              drop1.style.border = 'border: 2px solid red;';
        }
        }

如果有任何帮助，我将不胜感激。谢谢！

【问题讨论】：

标签： javascript html css drag-and-drop draggable

【解决方案1】：

只需更改drop函数内的边框样式：

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));
  ev.target.style.border = '2px solid red';
}

@import url('https://fonts.googleapis.com/css?family=Lato');
.activity-wrap {
  background-image: url("https://champlain.instructure.com/files/53385420/download?verifier=84S6CTzvskHjpREc4V3tcLUVhStOZwrbsoj5rVaT&amp;wrap=1");
  display: block;
  width: 803px;
  height: 463px;
  padding: 20px;
}

.test-activity-text {
  font-size: 1.5em;
  color: #5AAA5A;
  font-weight: bold;
  display: inline-block;
  position: relative;
  margin: auto;
  font-family: 'Lato';
  z-index: 2;
  padding: 20px;
  overflow: hidden;
}

.test-activity-text:hover {
  cursor: pointer;
  color: #4554A4;
}

.drop {
  display: inline-block;
  position: relative;
  width: 280px;
  height: 105px;
  border: 2px solid #aaaaaa;
  background-color: darkseagreen;
  overflow: hidden;
}

<div class="drop" id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="test-activity-text" id="tier-one" draggable="true" ondragstart="drag(event)">Text for Testing</div>

【讨论】：