HTML and CSS Reference
In-Depth Information
Listing 6-10. The Markup for the DnD Example
<section>
<header>
<h3>Drag the word “DnD” to the other box and back</h3>
</header>
<div id="leftDiv" ondragover="dragOver(event)" ondrop="dragDrop(event)">
<div id="word1" class="dragbox" draggable="true" ondragstart="return
dragDefine(event)" ondragend="dragEnd(event)">My</div>
<div id="word2" class="dragbox" draggable="true" ondragstart="return
dragDefine(event)" ondragend="dragEnd(event)">dog</div>
<div id="word3" class="dragbox" draggable="true" ondragstart="return
dragDefine(event)" ondragend="dragEnd(event)">is</div>
<div id="word4" class="dragbox" draggable="true" ondragstart="return
dragDefine(event)" ondragend="dragEnd(event)">called</div>
<div id="word5" class="dragbox" draggable="true" ondragstart="return
dragDefine(event)" ondragend="dragEnd(event)">Bobby</div>
</div>
<div id="rightDiv" ondragover="return dragOver(event)" ondrop="dragDropped(event)"></div>
</section>
In the document head, declare a script element, and create the functions to be called (Listing 6-11) when the
following happens:
The item starts to be dragged
The item being dragged is over another item
The drag is complete
The item being dragged is dropped
Listing 6-11. The Functions for Handling Drag and Drop
<script>
function dragStarted(evt) {
evt.dataTransfer.effectAllowed = 'move';
evt.dataTransfer.setData("text/plain", evt.target.getAttribute('id'));
evt.dataTransfer.setDragImage(evt.target, 0, 0);
return true;
}
function dragOver(evt) {
evt.preventDefault();
}
function dragEnded(evt) {
return true;
}
Search WWH ::




Custom Search