Drag and Drop Menu

JavaScriptSource Staff Jun 27, 2002

This is an example of a drag and drop menu. When you click on top of the menu you can drag it within the document.

The JavaScript Source: Navigation: Drag and Drop Menu

Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

<!-- TWO STEPS TO INSTALL DRAG AND DROP MENU:

1.  Copy the coding into the HEAD of your HTML document

2.  Add the last code into the BODY of your HTML document  -->

<HEAD>

<!-- Begin

<style>

.move

{

width:100%;

background-color:#99CCFF;

border-bottom:1px solid blue;

font-size:14px;

font-family:vardana;

font-color:"#33CCAA";

text-align:center;

}

.info

{

width:100%;

background-color:#99CCFF;

border-top:1px solid blue;

font-size:13px;

font-family:vardana;

font-color:"#33CCAA";

}

.panel

{

width:150;

position:absolute;

border:1px solid blue;

left:350;

top:200;

font-size:13px;

font-family:vardana;

}

.panel a:visited{color:blue;}

.panel a{text-decoration:none;color:blue}

.panel a:hover{text-decoration:none;}

#panel a.visited{

text-decoration:none;

}

.menu

{

width:100%;

background-color:lightyellow;

font-size:13px;

font-family:vardana;

}

</style>

N = (document.all) ? 0 : 1;

var ob;

var over = false;

function MD(e) {

if (over)

{

if (N) {

ob = document.getElementById("panel");

X=e.layerX;

Y=e.layerY;

return false;

}

else {

ob = document.getElementById("panel");

ob = ob.style;

X=event.offsetX;

Y=event.offsetY;

}

function MM(e) {

if (ob) {

if (N) {

ob.style.top = e.pageY-Y;

ob.style.left = e.pageX-X;

}

else {

ob.pixelLeft = event.clientX-X + document.body.scrollLeft;

ob.pixelTop = event.clientY-Y + document.body.scrollTop;

return false;

}

function MU() {

ob = null;

}

if (N) {

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

}

document.onmousedown = MD;

document.onmousemove = MM;

document.onmouseup = MU;

</script>

//  End -->

</HEAD>

<BODY>

<!-- Begin

function getArray(id)

{

var splitarray = link[id].split("|");

return splitarray;

}

function info(i,obj,col)

{

sublink = getArray(i);

infobar = document.getElementById("infob");

infobar.innerHTML = "<img src='pointer2.gif'>  "+sublink[2];

obj.style.backgroundColor=col;

}

function endi(obj,col)

{

obj.style.backgroundColor=col;

infobar = document.getElementById("infob");

infobar.innerHTML = "<img src='pointer2.gif'> <br>";

}

var link = new Array();

link[0] = ". HOME|http://javascriptsource.com |Visit my homepage";

link[1] = ". JavaScipts|http://www.javascripts.com|Free JavaScripts";

link[2] = ". My links|http://www.webdeveloper.com |Visit my links";

link[3] = ". HOME|http://javascriptsource.com |Visit my homepage";

link[4] = ". JavaScript |http://www.javascript.com|Free JavaScripts";

link[5] = ". My links|http://www.webdeveloper.com |Visit my links";

document.write("<div class='move' onmouseover='over=true;' onmouseout='over=false;' style='cursor:move'><font color=red><b>JavaScript  Source</b></font></div><div class='menu'><br></div>");

for(i=0;i<link.length;i++)

{

sublink = getArray(i);

document.write("<a href='"+sublink[1]+"'><div class='menu' onmouseover=\"info("+i+",this,'gold')\" onmouseout=\"endi(this,'lightyellow')\" style='cursor:hand'>  "+ sublink[0] +"</div></a>");

}

document.write("<div class='menu'><br></div><div class='info' id='infob' name='infob'><img src='pointer2.gif'> <br></div>");

</script>

</div>

//  End -->

<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>

by <a href="http://javascriptsource.com">The JavaScript Source</a></font>

</center><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Drag and Drop Menu

Leave a Response

Attention JavaScript Coders

Go Deeper