Here is a drag and drop example:
(tested on IE 5.5, 6, 8 & 9 using IETester and Seamonkey-2.14 - so should verify for Firefox too, as well as Chrome and Opera, but drag/drop is broken in safari-5.1.7 for windows/wine, so use 5.0.6 - I think apple intentionally broke things for the windows client)
here are functions
Code: Select all
function drag(ev){ //we will just store the inner html of our drag tag - it could be id, class or something else
ev.dataTransfer.setData("Text",ev.target?ev.target.innerHTML:event.srcElement.innerHTML) //IE needs "Text" and others are fine with it
}
function drop(ev){
if(ev.preventDefault){ev.preventDefault(); //or mozilla will navigate to the url.com of the text
ev.target.innerHTML=ev.dataTransfer.getData("Text") //we are replacing the inner html of our drop with our drag
}else{event.returnValue=false //ie workaround does not have preventDefault or target
event.srcElement.style.backgroundColor=ev.dataTransfer.getData("Text")
}
}
Notes on the html:
older versions of _some_ browsers only support dragging "a" or link tags, so use it with a blank href
we need to set draggable to true for the items we want to be able to drag
we also need to get the draggable, so we set ondragstart to our drag function and pass it the event
we also need to override the default function of ondragover - return false will do this nicely (or you _could_ use a function to preventDefault, but it is not browser independent)
and finally we need to do something with our drop event, so we set ondrop to pass the drop event to our drop function
Code: Select all
<a href="#" id="dragme" draggable="true" ondragstart="drag(event)">content to drag</a>
<div id="drophere" ondrop="drop(event)" ondragover="return false">a place to drop</div>
but since we used <a> tags, it will look like a link, so we need to add some css to fix that
Code: Select all
#dragme,#drophere{text-decoration:none;color:black}
note the link is href="#", a non-existent nav point, so that clicking on it instead of dragging doesn't cause a page reload (as href="" would)
All of the above css and html can be created dynamically in your script, but I split out as much as possible to show the basic principals
and the example:
Code: Select all
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>dragable colors</title><meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style>
#drop{left:15%;width:70%;top:65px;height:75%;overflow:auto}
#drop,#y,#r,#b{position:absolute;border:5px solid gray;padding:5px}
#r{left:35%;color:red}#b{left:45%;color:blue}#y{left:55%;color:yellow}
#r,#y,#b{width:5%;text-align:center;background:lightgray;text-decoration:none}
</style>
<script>
function allowDrag(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
return false
}
function drag(ev){
ev.dataTransfer.setData("Text",ev.target?ev.target.innerHTML:event.srcElement.innerHTML)
}
function drop(ev){alert;
if(ev.preventDefault){ev.preventDefault();
ev.target.style.backgroundColor=ev.dataTransfer.getData("Text")
}else{event.returnValue=false //ie workaround
event.srcElement.style.backgroundColor=ev.dataTransfer.getData("Text")
}
}
</script>
</head>
<body>
<a href="#" id="y" draggable="true" ondragstart="drag(event)">yellow</a>
<a href="#" id="r" draggable="true" ondragstart="drag(event)">red</a>
<a href="#" id="b" draggable="true" ondragstart="drag(event)">blue</a>
<div id="drop" ondrop="drop(event)" ondragover="allowDrag(event)">drag a color to this box</div>
</body>
</html>
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].