JavaScript DHTML/Page Components/Image Drag

Материал из Web эксперт
Перейти к: навигация, поиск

Dragging Images

   <source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">

<html> <head> <title>Recipe 13.11</title> <style type="text/css"> html {background-color:#cccccc} body {background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px;

   margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}

h1 {text-align:right; font-size:1.5em; font-weight:bold} h2 {text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline} .buttons {margin-top:10px}

 #imgAWrap {position:absolute; left:35%; top:20%; width:230px; height:102px; 
            border:solid black 1px; z-index:0}
 #imgBWrap {position:absolute; left:40%; top:25%; width:281px; height:100px; 
            border:solid black 1px; z-index:0}

</style> <script language="JavaScript" type="text/javascript"> /* *********************************************************** Example 4-3 (DHTMLAPI.js) "Dynamic HTML:The Definitive Reference" 2nd Edition by Danny Goodman Published by O"Reilly & Associates ISBN 1-56592-494-0 http://www.oreilly.ru Copyright 2002 Danny Goodman. All Rights Reserved.

                                                                                                                        • */

// DHTMLapi.js custom API for cross-platform // object positioning by Danny Goodman (http://www.dannyg.ru). // Release 2.0. Supports NN4, IE, and W3C DOMs. // Global variables var isCSS, isW3C, isIE4, isNN4, isIE6CSS; // Initialize upon load to let all browsers establish content objects function initDHTMLAPI() {

   if (document.images) {
       isCSS = (document.body && document.body.style) ? true : false;
       isW3C = (isCSS && document.getElementById) ? true : false;
       isIE4 = (isCSS && document.all) ? true : false;
       isNN4 = (document.layers) ? true : false;
       isIE6CSS = (document.rupatMode && document.rupatMode.indexOf("CSS1") >= 0) ? true : false;
   }

} // Set event handler to initialize API window.onload = initDHTMLAPI; // Seek nested NN4 layer from string name function seekLayer(doc, name) {

   var theObj;
   for (var i = 0; i < doc.layers.length; i++) {
       if (doc.layers[i].name == name) {
           theObj = doc.layers[i];
           break;
       }
       // dive into nested layers if necessary
       if (doc.layers[i].document.layers.length > 0) {
           theObj = seekLayer(document.layers[i].document, name);
       }
   }
   return theObj;

} // Convert object name string or object reference // into a valid element object reference function getRawObject(obj) {

   var theObj;
   if (typeof obj == "string") {
       if (isW3C) {
           theObj = document.getElementById(obj);
       } else if (isIE4) {
           theObj = document.all(obj);
       } else if (isNN4) {
           theObj = seekLayer(document, obj);
       }
   } else {
       // pass through object reference
       theObj = obj;
   }
   return theObj;

} // Convert object name string or object reference // into a valid style (or NN4 layer) reference function getObject(obj) {

   var theObj = getRawObject(obj);
   if (theObj && isCSS) {
       theObj = theObj.style;
   }
   return theObj;

} // Position an object at a specific pixel coordinate function shiftTo(obj, x, y) {

   var theObj = getObject(obj);
   if (theObj) {
       if (isCSS) {
           // equalize incorrect numeric value type
           var units = (typeof theObj.left == "string") ? "px" : 0 
           theObj.left = x + units;
           theObj.top = y + units;
       } else if (isNN4) {
           theObj.moveTo(x,y)
       }
   }

} // Move an object by x and/or y pixels function shiftBy(obj, deltaX, deltaY) {

   var theObj = getObject(obj);
   if (theObj) {
       if (isCSS) {
           // equalize incorrect numeric value type
           var units = (typeof theObj.left == "string") ? "px" : 0 
           theObj.left = getObjectLeft(obj) + deltaX + units;
           theObj.top = getObjectTop(obj) + deltaY + units;
       } else if (isNN4) {
           theObj.moveBy(deltaX, deltaY);
       }
   }

} // Set the z-order of an object function setZIndex(obj, zOrder) {

   var theObj = getObject(obj);
   if (theObj) {
       theObj.zIndex = zOrder;
   }

} // Set the background color of an object function setBGColor(obj, color) {

   var theObj = getObject(obj);
   if (theObj) {
       if (isNN4) {
           theObj.bgColor = color;
       } else if (isCSS) {
           theObj.backgroundColor = color;
       }
   }

} // Set the visibility of an object to visible function show(obj) {

   var theObj = getObject(obj);
   if (theObj) {
       theObj.visibility = "visible";
   }

} // Set the visibility of an object to hidden function hide(obj) {

   var theObj = getObject(obj);
   if (theObj) {
       theObj.visibility = "hidden";
   }

} // Retrieve the x coordinate of a positionable object function getObjectLeft(obj) {

   var elem = getRawObject(obj);
   var result = 0;
   if (document.defaultView) {
       var style = document.defaultView;
       var cssDecl = style.getComputedStyle(elem, "");
       result = cssDecl.getPropertyValue("left");
   } else if (elem.currentStyle) {
       result = elem.currentStyle.left;
   } else if (elem.style) {
       result = elem.style.left;
   } else if (isNN4) {
       result = elem.left;
   }
   return parseInt(result);

} // Retrieve the y coordinate of a positionable object function getObjectTop(obj) {

   var elem = getRawObject(obj);
   var result = 0;
   if (document.defaultView) {
       var style = document.defaultView;
       var cssDecl = style.getComputedStyle(elem, "");
       result = cssDecl.getPropertyValue("top");
   } else if (elem.currentStyle) {
       result = elem.currentStyle.top;
   } else if (elem.style) {
       result = elem.style.top;
   } else if (isNN4) {
       result = elem.top;
   }
   return parseInt(result);

} // Retrieve the rendered width of an element function getObjectWidth(obj) {

   var elem = getRawObject(obj);
   var result = 0;
   if (elem.offsetWidth) {
       result = elem.offsetWidth;
   } else if (elem.clip && elem.clip.width) {
       result = elem.clip.width;
   } else if (elem.style && elem.style.pixelWidth) {
       result = elem.style.pixelWidth;
   }
   return parseInt(result);

} // Retrieve the rendered height of an element function getObjectHeight(obj) {

   var elem = getRawObject(obj);
   var result = 0;
   if (elem.offsetHeight) {
       result = elem.offsetHeight;
   } else if (elem.clip && elem.clip.height) {
       result = elem.clip.height;
   } else if (elem.style && elem.style.pixelHeight) {
       result = elem.style.pixelHeight;
   }
   return parseInt(result);

} // Return the available content width space in browser window function getInsideWindowWidth() {

   if (window.innerWidth) {
       return window.innerWidth;
   } else if (isIE6CSS) {
       // measure the html element"s clientWidth
       return document.body.parentElement.clientWidth
   } else if (document.body && document.body.clientWidth) {
       return document.body.clientWidth;
   }
   return 0;

} // Return the available content height space in browser window function getInsideWindowHeight() {

   if (window.innerHeight) {
       return window.innerHeight;
   } else if (isIE6CSS) {
       // measure the html element"s clientHeight
       return document.body.parentElement.clientHeight
   } else if (document.body && document.body.clientHeight) {
       return document.body.clientHeight;
   }
   return 0;

}

</script> <script language="JavaScript" type="text/javascript"> // Global holds reference to selected element var selectedObj; // Globals hold location of click relative to element var offsetX, offsetY; // Set global reference to element being engaged and dragged function setSelectedElem(evt) {

   var target = (evt.target) ? evt.target : evt.srcElement;
   var divID = (target.name && target.src) ? target.name + "Wrap" : "";
   if (divID) {
       if (document.layers) {
           selectedObj = document.layers[divID];
       } else if (document.all) {
           selectedObj = document.all(divID);
       } else if (document.getElementById) {
           selectedObj = document.getElementById(divID);
       }
       setZIndex(selectedObj, 100);
       return;
   }
   selectedObj = null;
   return;

} // Turn selected element on function engage(evt) {

   evt = (evt) ? evt : event;
   setSelectedElem(evt);
   if (selectedObj) {
       if (document.body && document.body.setCapture) {
           // engage event capture in IE/Win
           document.body.setCapture();
       }
       if (evt.pageX) {
           offsetX = evt.pageX - ((selectedObj.offsetLeft) ? 
                     selectedObj.offsetLeft : selectedObj.left);
           offsetY = evt.pageY - ((selectedObj.offsetTop) ? 
                     selectedObj.offsetTop : selectedObj.top);
       } else if (typeof evt.offsetX != "undefined") {
           offsetX = evt.offsetX - ((evt.offsetX < -2) ? 
                     0 : document.body.scrollLeft);
           offsetX -= (document.body.parentElement && 
                    document.body.parentElement.scrollLeft) ? 
                    document.body.parentElement.scrollLeft : 0
           offsetY = evt.offsetY - ((evt.offsetY < -2) ? 
                     0 : document.body.scrollTop);
           offsetY -= (document.body.parentElement && 
                    document.body.parentElement.scrollTop) ? 
                    document.body.parentElement.scrollTop : 0
       } else if (typeof evt.clientX != "undefined") {
           offsetX = evt.clientX - ((selectedObj.offsetLeft) ? 
                     selectedObj.offsetLeft : 0);
           offsetY = evt.clientY - ((selectedObj.offsetTop) ? 
                     selectedObj.offsetTop : 0);
       }
       return false;
   }

}

// Drag an element function dragIt(evt) {

   evt = (evt) ? evt : event;
   if (selectedObj) {
       if (evt.pageX) {
           shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY));
       } else if (evt.clientX || evt.clientY) {
           shiftTo(selectedObj, (evt.clientX - offsetX), (evt.clientY - offsetY));
       }
       evt.cancelBubble = true;
       return false;
   }

} // Turn selected element off function release(evt) {

   if (selectedObj) {
       setZIndex(selectedObj, 0);
       if (document.body && document.body.releaseCapture) {
           // stop event capture in IE/Win
           document.body.releaseCapture();
       }
       selectedObj = null;
   }

} // Assign event handlers used by both Navigator and IE function initDrag() {

   if (document.layers) {
       // turn on event capture for these events in NN4 event model
       document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
       return;
   } else if (document.body & document.body.addEventListener) {
       // turn on event capture for these events in W3C DOM event model
     document.addEventListener("mousedown", engage, true);
     document.addEventListener("mousemove", dragIt, true);
     document.addEventListener("mouseup", release, true);
     return;
   }
   document.onmousedown = engage;
    document.onmousemove = dragIt;
    document.onmouseup = release;
   return;

}

</script> </head> <body style="height:400px" onload="initDHTMLAPI(); initDrag()">

Dragging Images


<img id="imgZ" name="imgZ" src="http://www.wbex.ru/style/logo.png" width="230" height="102" border="0" alt="Non-draggable widget">

<img id="imgA" name="imgA" src="http://www.wbex.ru/style/logo.png" width="230" height="102" border="0" alt="Primary draggable widget">
<img id="imgB" name="imgB" src="http://www.wbex.ru/style/logoRed.png" width="281" height="100" border="0" alt="Secondary draggable widget">

</body> </html>


      </source>
   
  


Drag two Images

   <source lang="html4strict">

<html> <head> <title>Drag Image</title> <style type="text/css">

 body {font-family:Ariel, sans-serif; text-align:right}
 #imgAWrap {position:absolute; left:50px; top:100px; width:120px; height:90px; 
            border:solid black 1px; z-index:0}
 #imgBWrap {position:absolute; left:110px; top:145px; width:120px; height:90px; 
            border:solid black 1px; z-index:0}

</style> <script language="JavaScript" type="text/javascript"> /* *********************************************************** Example 4-3 (DHTMLapi.js) "Dynamic HTML:The Definitive Reference" 2nd Edition by Danny Goodman Published by O"Reilly & Associates ISBN 1-56592-494-0 http://www.oreilly.ru Copyright 2002 Danny Goodman. All Rights Reserved.

                                                                                                                        • */

// DHTMLapi.js custom API for cross-platform // object positioning by Danny Goodman (http://www.dannyg.ru). // Release 2.0. Supports NN4, IE, and W3C DOMs. // Global variables var isCSS, isW3C, isIE4, isNN4; // initialize upon load to let all browsers establish content objects function initDHTMLAPI() {

   if (document.images) {
       isCSS = (document.body && document.body.style) ? true : false;
       isW3C = (isCSS && document.getElementById) ? true : false;
       isIE4 = (isCSS && document.all) ? true : false;
       isNN4 = (document.layers) ? true : false;
       isIE6CSS = (document.rupatMode && document.rupatMode.indexOf("CSS1") >= 0) ? true : false;
   }

} // set event handler to initialize API window.onload = initDHTMLAPI; // Seek nested NN4 layer from string name function seekLayer(doc, name) {

   var theObj;
   for (var i = 0; i < doc.layers.length; i++) {
       if (doc.layers[i].name == name) {
           theObj = doc.layers[i];
           break;
       }
       // dive into nested layers if necessary
       if (doc.layers[i].document.layers.length > 0) {
           theObj = seekLayer(document.layers[i].document, name);
       }
   }
   return theObj;

} // Convert object name string or object reference // into a valid element object reference function getRawObject(obj) {

   var theObj;
   if (typeof obj == "string") {
       if (isW3C) {
           theObj = document.getElementById(obj);
       } else if (isIE4) {
           theObj = document.all(obj);
       } else if (isNN4) {
           theObj = seekLayer(document, obj);
       }
   } else {
       // pass through object reference
       theObj = obj;
   }
   return theObj;

} // Convert object name string or object reference // into a valid style (or NN4 layer) reference function getObject(obj) {

   var theObj = getRawObject(obj);
   if (theObj && isCSS) {
       theObj = theObj.style;
   }
   return theObj;

} // Position an object at a specific pixel coordinate function shiftTo(obj, x, y) {

   var theObj = getObject(obj);
   if (theObj) {
       if (isCSS) {
           // equalize incorrect numeric value type
           var units = (typeof theObj.left == "string") ? "px" : 0 
           theObj.left = x + units;
           theObj.top = y + units;
       } else if (isNN4) {
           theObj.moveTo(x,y)
       }
   }

} // Move an object by x and/or y pixels function shiftBy(obj, deltaX, deltaY) {

   var theObj = getObject(obj);
   if (theObj) {
       if (isCSS) {
           // equalize incorrect numeric value type
           var units = (typeof theObj.left == "string") ? "px" : 0 
           theObj.left = getObjectLeft(obj) + deltaX + units;
           theObj.top = getObjectTop(obj) + deltaY + units;
       } else if (isNN4) {
           theObj.moveBy(deltaX, deltaY);
       }
   }

} // Set the z-order of an object function setZIndex(obj, zOrder) {

   var theObj = getObject(obj);
   if (theObj) {
       theObj.zIndex = zOrder;
   }

} // Set the background color of an object function setBGColor(obj, color) {

   var theObj = getObject(obj);
   if (theObj) {
       if (isNN4) {
           theObj.bgColor = color;
       } else if (isCSS) {
           theObj.backgroundColor = color;
       }
   }

} // Set the visibility of an object to visible function show(obj) {

   var theObj = getObject(obj);
   if (theObj) {
       theObj.visibility = "visible";
   }

} // Set the visibility of an object to hidden function hide(obj) {

   var theObj = getObject(obj);
   if (theObj) {
       theObj.visibility = "hidden";
   }

} // Retrieve the x coordinate of a positionable object function getObjectLeft(obj) {

   var elem = getRawObject(obj);
   var result = 0;
   if (document.defaultView) {
       var style = document.defaultView;
       var cssDecl = style.getComputedStyle(elem, "");
       result = cssDecl.getPropertyValue("left");
   } else if (elem.currentStyle) {
       result = elem.currentStyle.left;
   } else if (elem.style) {
       result = elem.style.left;
   } else if (isNN4) {
       result = elem.left;
   }
   return parseInt(result);

} // Retrieve the y coordinate of a positionable object function getObjectTop(obj) {

   var elem = getRawObject(obj);
   var result = 0;
   if (document.defaultView) {
       var style = document.defaultView;
       var cssDecl = style.getComputedStyle(elem, "");
       result = cssDecl.getPropertyValue("top");
   } else if (elem.currentStyle) {
       result = elem.currentStyle.top;
   } else if (elem.style) {
       result = elem.style.top;
   } else if (isNN4) {
       result = elem.top;
   }
   return parseInt(result);

} // Retrieve the rendered width of an element function getObjectWidth(obj) {

   var elem = getRawObject(obj);
   var result = 0;
   if (elem.offsetWidth) {
       result = elem.offsetWidth;
   } else if (elem.clip && elem.clip.width) {
       result = elem.clip.width;
   } else if (elem.style && elem.style.pixelWidth) {
       result = elem.style.pixelWidth;
   }
   return parseInt(result);

} // Retrieve the rendered height of an element function getObjectHeight(obj) {

   var elem = getRawObject(obj);
   var result = 0;
   if (elem.offsetHeight) {
       result = elem.offsetHeight;
   } else if (elem.clip && elem.clip.height) {
       result = elem.clip.height;
   } else if (elem.style && elem.style.pixelHeight) {
       result = elem.style.pixelHeight;
   }
   return parseInt(result);

}

// Return the available content width space in browser window function getInsideWindowWidth() {

   if (window.innerWidth) {
       return window.innerWidth;
   } else if (isIE6CSS) {
       // measure the html element"s clientWidth
       return document.body.parentElement.clientWidth
   } else if (document.body && document.body.clientWidth) {
       return document.body.clientWidth;
   }
   return 0;

} // Return the available content height space in browser window function getInsideWindowHeight() {

   if (window.innerHeight) {
       return window.innerHeight;
   } else if (isIE6CSS) {
       // measure the html element"s clientHeight
       return document.body.parentElement.clientHeight
   } else if (document.body && document.body.clientHeight) {
       return document.body.clientHeight;
   }
   return 0;

}

</script> <script language="JavaScript" type="text/javascript"> // Global holds reference to selected element var selectedObj; // Globals hold location of click relative to element var offsetX, offsetY; // Set global reference to element being engaged and dragged function setSelectedElem(evt) {

   var target = (evt.target) ? evt.target : evt.srcElement;
   var divID = (target.name && target.src) ? target.name + "Wrap" : "";
   if (divID) {
       if (document.layers) {
           selectedObj = document.layers[divID];
       } else if (document.all) {
           selectedObj = document.all(divID);
       } else if (document.getElementById) {
           selectedObj = document.getElementById(divID);
       }
       setZIndex(selectedObj, 100);
       return;
   }
   selectedObj = null;
   return;

} // Drag an element function dragIt(evt) {

   evt = (evt) ? evt : event;
   if (selectedObj) {
       if (evt.pageX) {
           shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY));
       } else if (evt.clientX || evt.clientY) {
           shiftTo(selectedObj, (evt.clientX - offsetX), (evt.clientY - offsetY));
       }
       evt.cancelBubble = true;
       return false;
   }

} // Turn selected element on function engage(evt) {

   evt = (evt) ? evt : event;
   setSelectedElem(evt);
   if (selectedObj) {
       if (evt.pageX) {
           offsetX = evt.pageX - ((selectedObj.offsetLeft) ? 
                     selectedObj.offsetLeft : selectedObj.left);
           offsetY = evt.pageY - ((selectedObj.offsetTop) ? 
                     selectedObj.offsetTop : selectedObj.top);
       } else if (evt.offsetX || evt.offsetY) {
           offsetX = evt.offsetX - ((evt.offsetX < -2) ? 
                     0 : document.body.scrollLeft);
           offsetY = evt.offsetY - ((evt.offsetY < -2) ? 
                     0 : document.body.scrollTop);
       } else if (evt.clientX) {
           offsetX = evt.clientX - ((selectedObj.offsetLeft) ? 
                     selectedObj.offsetLeft : 0);
           offsetY = evt.clientY - ((selectedObj.offsetTop) ? 
                     selectedObj.offsetTop : 0);
       }
       return false;
   }

} // Turn selected element off function release(evt) {

   if (selectedObj) {
       setZIndex(selectedObj, 0);
       selectedObj = null;
   }

} // Set event capture for Navigator 4 function setNSEventCapture() {

   document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);

} // Assign event handlers used by both Navigator and IE function init() {

   if (document.layers) {
       setNSEventCapture();
   }
   document.onmousedown = engage;
   document.onmousemove = dragIt;
   document.onmouseup = release;

} </script> </head> <body onload="initDHTMLAPI(); init();">

Element Dragging


<img id="imgA" name="imgA" src="http://www.wbex.ru/style/logo.png" width="120" height="90" border="0">
<img id="imgB" name="imgB" src="http://www.wbex.ru/style/logoRed.png" width="120" height="90" border="0">

</body> </html>


      </source>