Dragging Elements with onMouseMove : Mouse Event « Event « JavaScript DHTML






  1. JavaScript DHTML
  2. Event
  3. Mouse Event

Dragging Elements with onMouseMove

  


/*
JavaScript Bible, Fourth Edition
by Danny Goodman 

John Wiley & Sons CopyRight 2001
*/

<HTML>
<HEAD><TITLE>onMouseMove Event Handler</TITLE>

<STYLE TYPE="text/css">
    #camap {position:absolute; left:20; top:120}
    #ormap {position:absolute; left:80; top:120}
    #wamap {position:absolute; left:140; top:120}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
// global variables used while dragging
var offsetX = 0
var offsetY = 0
var selectedObj
var frontObj
// set document-level event handlers
document.onmousedown = engage
document.onmouseup = release
// positioning an object at a specific pixel coordinate
function shiftTo(obj, x, y) {
    obj.style.pixelLeft = x
    obj.style.pixelTop = y
}
// setting the z-order of an object
function bringToFront(obj) {
    if (frontObj) {
        frontObj.style.zIndex = 0
    }
    frontObj = obj
    frontObj.style.zIndex = 1
}
// set global var to a reference to dragged element
function setSelectedObj() {
    var imgObj = window.event.srcElement
    if (imgObj.id.indexOf("map") == 2) {
        selectedObj = imgObj
        bringToFront(selectedObj)
        return
    }
    selectedObj = null
    return
}
// do the dragging (called repeatedly by onMouseMove)
function dragIt() {
    if (selectedObj) {
        shiftTo(selectedObj, (event.clientX - offsetX), (event.clientY - offsetY))
        return false
    }
}
// set global vars and turn on mousemove trapping (called by onMouseDown)
function engage() {
    setSelectedObj()
    if (selectedObj) {
        document.onmousemove = dragIt
        offsetX = window.event.offsetX - document.body.scrollLeft
        offsetY = window.event.offsetY - document.body.scrollTop
    }
}
// restore everything as before (called by onMouseUp)
function release() {
    if (selectedObj) {
        document.onmousemove = null
        selectedObj = null
    }
}
</SCRIPT>
</HEAD>
<BODY>
<H1>onMouseMove Event Handler</H1>
<HR>
Click and drag the images:
<IMG ID="camap" SRC="http://www.java2s.com/style/logo.png" WIDTH="47" HEIGHT="82" BORDER="0">
<IMG ID="ormap" SRC="http://www.java2s.com/style/logoRed.png" WIDTH="57" HEIGHT="45" BORDER="0">
<IMG ID="wamap" SRC="http://www.java2s.com/style/logo.png" WIDTH="38" HEIGHT="29" BORDER="0">
</SCRIPT>
</BODY>
</HTML>








Related examples in the same category

1.Catches and manages the mouse's events
2.Mouse and key event (IE)
3.Mouse in image and out
4.Image Mouse on and out
5.Mouse cross hairs
6.Mouse Drag and Drop
7. Creating a Rollover Effect
8.Codependent Link Tag and the onMouseOver Event
9.Which mouse button was clicked?
10.Which element was clicked
11.Mouse over event
12.Get component From Point (Mouse)
13.Cutting and Pasting under Script Control
14.Using Drag-Related Event Handlers
15. Using onDragEnter and onDragLeave Event Handlers
16.Using onMouseDown and onMouseUp Event Handlers
17.Using the toElement and fromElement Properties
18. The onBeforeCopy Event Handler
19.Called from an onmousedown event handler
20.Mousedown event handler of an object within a Layer
21.Cursor Arrival and Departure
22.Use Mouse over action to transfer url location
23.Get mouse position with on mouse move event (IE)
24.Get mouse position in mouse down event (IE)
25.H1 double click events
26.Return boolean value for on click event
27.Register mouse down event(IE)