HTML and CSS Reference
In-Depth Information
else
{
imgSrc = "Images/BlackPiece.png";
pid = "b"+id;
}
<text>
<img id="@pid" src="@imgSrc" draggable="true" class="piece" >
</text>
}
</div>
</text>
}
}
</div>
<script type="text/javascript">
// Get all the black squares
var squares = document.querySelectorAll('.bblack');
var i = 0;
while (i < squares.length) {
var s = squares[i++];
// Add the event listeners
s.addEventListener('dragover', dragOver, false);
s.addEventListener('drop', drop, false);
s.addEventListener('dragenter', dragEnter, false);
s.addEventListener('dragleave', dragLeave, false);
}
i = 0;
var pieces = document.querySelectorAll('img');
while (i < pieces.length) {
var p = pieces[i++];
// Add the event listeners
p.addEventListener('dragstart', dragStart, false);
p.addEventListener('dragend', dragEnd, false);
}
// Handle the dragover event
function dragOver(e) {
if (e.preventDefault) {
e.preventDefault();
}
// Get the img element that is being dragged
var dragID = e.dataTransfer.getData("text/plain");
var dragPiece = document.getElementById(dragID);
if (dragPiece &&
e.target.tagName === "DIV" &&
isValidMove(dragPiece, e.target, false)) {
e.dataTransfer.dropEffect = "move";
}
