My drag drop library example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Drag and Drop Example</title>
<script type="text/javascript" src="/lib/prototype.js"></script>
<script type="text/javascript" src="/lib/mydragdrop.js"></script>
<style type="text/css">
#dragDiv, #dragDiv2 {
*width: 150px;
min-width: 150px;
border: #333 1px solid;
min-height: 150px;
float: left;
}
#dropDiv {
*width: 150px;
min-width: 150px;
border: #333 1px solid;
min-height: 150px;
margin-left: 20px;
float: left;
}
.hoverActive {
background-color: #ffc;
}
img {
vertical-align: middle;
}
</style>
</head>
<body>
<div id="dragDiv">
<img id="img1" src="/images/puzzle1.jpg"/><img id="img2" src="/images/puzzle2.jpg"/><img id="img3" src="/images/puzzle3.jpg"/>
</div>
<div id="dragDiv2">
<img id="img4" src="/images/puzzle4.jpg"/>
</div>
<div id="dropDiv">
</div>
<script type="text/javascript">
window.onload = function() {
new Drag('img1', {revert: false});
new Drag('img2', {revert: true});
new Drag('img3', {revert: true});
new Drag('img4', {revert: true});
Drop.add('dropDiv', {hoverclass: 'hoverActive', containers: ["dragDiv"],
onDrop: function(drag, drop) {
drag.style.left = "";
drag.style.top = "";
drop.style.borderColor = "#000";
drop.style.borderWidth = "thin";
if (drop.lastChild.nodeType == 3) drop.removeChild(drop.lastChild);
drop.appendChild(drag);
},
onHover: function(drag, drop){
drop.style.borderColor = "#886";
drop.style.borderWidth = "thick";
}
});
Drop.add('dragDiv', {hoverclass: 'hoverActive',
onDrop: function(drag, drop) {
drag.style.left = "";
drag.style.top = "";
if (drop.lastChild.nodeType == 3) drop.removeChild(drop.lastChild);
drop.appendChild(drag);
}
});
}
</script>
</body>
</html>
Here is mydragdrop.js source
No comments :
Post a Comment