當其他元素被丟棄時更改元素的邊框顏色

我在將一個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

當其他元素被丟棄時更改元素的邊框顏色

回答

相關問題