↑
Main Page

Element.dragDrop();

oElement.dragDrop();

}

};

By using the

event.button

property, you’re making sure that the left mouse button is down while the

mouse is moving, which is typically when an object begins to be dragged.

The next step is to use the

dataTransfer

object in the element’s

ondragstart

event handler to deter-

mine the action of the dragged item. For example, you could make a

<div/>

that, when dragged into a

text box, inserts text:

<html>

<head>

<title>System Drag And Drop Example</title>

function handleMouseMove(oEvent) {

if (oEvent.button == 1) {

oEvent.srcElement.dragDrop();

}

function handleDragDropEvent(oEvent) {

oEvent.dataTransfer.setData(“text”, “This is a red square”);

}

</script>

</head>

<body>

<p>Try dragging the red square into the textbox.</p>

<p><div style=”background-color: red; height: 100px; width: 100px”

onmousemove=”handleMouseMove(event)”

ondragstart=”handleDragDropEvent(event)”>This is a red square</div>

</p>

<form>

</form>

</body>

</html>

When you drag the red

<div/>

in this example, the text “This is a red square” is set to the

dataTransfer

object. So if you drop the square into the text box, that text is instantly inserted as if it had been dragged

from another text box. You could even drag the red

<div/>

into another browser window’s text box and

the same thing would occur.

If you choose to store a URL instead of just text, it’s possible to drag the red square into another browser

window and have the browser navigate to the page specified:

<html>

<head>

<title>System Drag And Drop Example</title>

function handleMouseMove(oEvent) {

if (oEvent.button == 1) {

398

Chapter 13

16_579088 ch13.qxd 3/28/05 11:41 AM Page 398