Question

一旦我将另一个元素拖放到其中，我在更改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;';
        }
        }

我很感激任何帮助。谢谢！

Answer 1

只需更改drop功能中的边框样式：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: