当其他元素被丢弃时更改元素的边框颜色

我在将一个div元素的边框拖放到其中时遇到问题。当其他元素被丢弃时更改元素的边框颜色

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

我试过这个，但如果我执行它停止将这个元素dropable。

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

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

来源

2017-07-13 DavidM

只要改变边框样式的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>

来源

2017-07-13 19:14:45

当其他元素被丢弃时更改元素的边框颜色

回答

相关问题