他の要素がドロップされたときの要素の境界線の色を変更します。

Question

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

私は、任意の助けをいただければと思います。ありがとう！

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