HTML and CSS Reference
In-Depth Information
else {
e.dataTransfer.dropEffect = "none";
}
}
function dragStart(e) {
if (e.target.draggable) {
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("text/plain", e.target.id);
e.target.classList.add("selected");
var dragIcon = document.createElement("img");
dragIcon.src = "Images/smiley.jpg";
e.dataTransfer.setDragImage(dragIcon, 0, 0);
}
}
function drop(e) {
// Prevent the event from being raised on the parent element
if (e.stopPropagation) {
e.stopPropagation();
}
// Stop the browsers default action
if (e.preventDefault) {
e.preventDefault();
}
// Get the img element that is being dragged
var droppedID = e.dataTransfer.getData("text/plain");
var droppedPiece = document.getElementById(droppedID);
if (droppedPiece &&
e.target.tagName === "DIV" &&
isValidMove(droppedPiece, e.target, true)) {
// Create a new img on the target location
var newPiece = document.createElement("img");
newPiece.src = droppedPiece.src;
newPiece.id = droppedPiece.id.substr(0, 1) + e.target.id;
if (droppedPiece.draggable){
newPiece.draggable = true;
newPiece.classList.add("jumpOnly");
}
newPiece.classList.add("piece");
newPiece.addEventListener("dragstart", dragStart, false);
newPiece.addEventListener("dragend", dragEnd, false);
e.target.appendChild(newPiece);
// Remove the previous image
droppedPiece.parentNode.removeChild(droppedPiece);
Search WWH ::




Custom Search