NWE Help: Web: Authoring: Tips: Drag Text

NWE Home :: Help :: Web :: Authoring :: HTML :: Tips

This trick allows you to write text that can be dragged all over the screen. When you first viewed this page, you probably noticed the two boxes floating around. If you attempted to move them with the cursor, you realized that they could be placed anywhere on the screen. If you want a nice multimedia effect to your site, one which allows for boxes of text to be placed over one another or moved around, this javascript might fit your work. This code allows for four blocks of text.

First, copy the following code to your html document, and place it just after the <Body> tag.

<STYLE TYPE="text/css"> 
#elDRAG1 {POSITION: absolute;  VISIBILITY: visible; 
LEFT: 98; TOP: 71; Z-INDEX: 5; } 
#elDRAG2 {POSITION: absolute;  VISIBILITY: visible;
 LEFT: 293; TOP: 311; Z-INDEX: 1; }
#elDRAG3 {POSITION: absolute;  VISIBILITY: visible;
 LEFT: 108; TOP: 96; Z-INDEX: 4; }
#elDRAG4 {POSITION: absolute;  VISIBILITY: visible;
 LEFT: 38; TOP: 136; Z-INDEX: 2; }

Next, copy the following code and place it in front of the first block of text tha t you want to be able to move around.

<div id="elDRAG2"  style="position:absolute; z-index:1; 
left:293px; top:311px; visibility:visible;
width:200px;  background-color: #FFFFFF; 
layer-background-color: #003333; border: 1px none #000000">

Just after this code, you need to write the text that will be movable. For example, let's write:

This is a piece of movable text.

Then place the following code after the text you've written:

</div>

For each additional block of text, repeat the process. Only, instead of placing:

<div id="elDRAG2"

before the introductory set of code, place the next elDRAG number found in the first chunk of code you copied.

Finally, place the following code (as is) on the bottom of your document.



<!---bottom script--->
<SCRIPT LANGUAGE="JavaScript">


     <!--

         IE4 = (document.all) ? 1 : 0;
         NS4 = (document.layers) ? 1 : 0;
         ver4 = (IE4 || NS4) ? 1 : 0;

         currentX = currentY = 0;
         whichEl = null;
         
         function grabEl(e) {
             if (IE4) {
                 whichEl = event.srcElement;
         
                 while (whichEl.id.indexOf("DRAG") == -1) {
                     whichEl = whichEl.parentElement;
                     if (whichEl == null) { return }
                 }
             }
             else {
                 mouseX = e.pageX;
                 mouseY = e.pageY;
         
                 for ( i=0; i tempLayer.left) && (mouseX < (tempLayer.left + tempLayer.clip.width)) 
                          && (mouseY > tempLayer.top) && (mouseY < (tempLayer.top + tempLayer.clip.height)) ) {
                         whichEl = tempLayer;
                     }
                 } 
         
                 if (whichEl == null) { return}
             }

             if (whichEl != activeEl) {


                 if (IE4) { whichEl.style.zIndex = activeEl.style.zIndex + 1 }




                     else { whichEl.moveAbove(activeEl) };
                     activeEl = whichEl;
             }
         
             if (IE4) {
                 whichEl.style.pixelLeft = whichEl.offsetLeft;
                 whichEl.style.pixelTop = whichEl.offsetTop;
         
                 currentX = (event.clientX + document.body.scrollLeft);
                 currentY = (event.clientY + document.body.scrollTop); 
         
             }
             else {
                 currentX = e.pageX;
                 currentY = e.pageY;
         
                 document.captureEvents(Event.MOUSEMOVE);
                 document.onmousemove = moveEl;
             }
         }
         
         function moveEl(e) {
             if (whichEl == null) { return };
         
             if (IE4) {
                 newX = (event.clientX + document.body.scrollLeft);
                 newY = (event.clientY + document.body.scrollTop);
             }
             else {
                 newX = e.pageX;
                 newY = e.pageY;
             }

             distanceX = (newX - currentX);
             distanceY = (newY - currentY);
             currentX = newX;
             currentY = newY;
         
             if (IE4) {
                 whichEl.style.pixelLeft += distanceX;
                 whichEl.style.pixelTop += distanceY;
                 event.returnValue = false;
             }
             else { whichEl.moveBy(distanceX,distanceY) }
         }
         
         function checkEl() {
             if (whichEl!=null) { return false }
         }
         
         function dropEl() {
             if (NS4) { document.releaseEvents(Event.MOUSEMOVE) }
             whichEl = null;
         }
         
         function cursEl() {
             if (event.srcElement.id.indexOf("DRAG") != -1) {
                 event.srcElement.style.cursor = "move"
             }
         }
         
         if (ver4) {
             if (NS4) {
                 document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
                 activeEl = document.elDRAG1;
             }
             else {
                 document.onmousemove = moveEl;
                 document.onselectstart = checkEl;
                 document.onmouseover = cursEl;
                 activeEl = document.all.elDRAG1;
             }
         
             document.onmousedown = grabEl;
             document.onmouseup = dropEl;
         }


activeEl = elDRAG1;

     //-->
     


</SCRIPT>

This is a piece of movable text.

Here is some more movable text.