HTML and CSS Reference
In-Depth Information
eXerCISe 14-4. aDDING VISUaL FeeDBaCK
1.
You already have a dragstart event handler; add the following code in bold to the
dragStart() function. This will add the “selected” class to the element.
function dragStart(e) {
e.dataTransfer.effectAllowed = "all";
e.dataTransfer.setData("text/plain", e.target.id);
e.target.classList.add("selected");
}
2.
Add the dragEnd() function using the following code that will simply remove the
selected class when the drag operation has completed.
function dragEnd(e) {
e.target.classList.remove("selected");
}
3.
Add the dragEnter() and dragLeave() function using the following code. This adds
the “drop” class to the element and then removes it.
function dragEnter(e) {
e.target.classList.add('drop');
}
function dragLeave(e) {
e.target.classList.remove("drop");
}
4.
Since you've added three new event handlers, you'll need to add code to add the
event listeners. Add the code shown in bold to the existing script element.
var squares = document.querySelectorAll('.bblack');
var i = 0;
while (i < squares.length){
var s = squares[i++];
s.addEventListener('dragover', dragOver, false);
s.addEventListener('drop', drop, false);
s.addEventListener('dragenter', dragEnter, false);
s.addEventListener('dragleave', dragLeave, false);
}
 
Search WWH ::




Custom Search