We are using drag boxes at Wohill to put information that can be easily accessed to save space.
An example is the wallpaper section to the left. The three latest creations are visible directly as links. To see all the others you can click on the fourth option "more..." which opens up a mini-window containing all wallpapers links.
This mini-window is really a so-called div, an HTML-element, that is there all the time but gets visible when clicking on "more...", This saves some space but another advantage with this solution is that you can click and drag and drop this little box or window all over the webpage.
Look at this dummy box:
Drag-and-drop
This is the text
that can also be a
If you place the marker on the orange bar that says "Drag-and-drop" and click and hold, you can drag it all over the web page. And it will still function the same way and still have the same content.
You can easily implement this on your own and tweak it for your own purposes.
What you need is a stylesheet with the following elements:
<style type="text/css">
.aBox {
background-color: #FFFFFF;
border: 1px solid #000000;
color: #000000;
padding: 0px;
margin:0px;
position: relative;
}.
aBar {
background-color: #E1771E;
color: #ffffff;
cursor: move;
font-weight: bold;
font-size:12px;
padding: 2px 1em 2px 1em;
}
.aContent {
padding: 10px;
}
</style> |
You need to add the actual HTML-code for the div somewhere:
<div id="boxToDrag" class="aBox" style="width: 200px;">
<div class="aBar" onmousedown="dragStart(event, 'boxToDrag')">Drag-and-drop</div>
<div class="aContent" style="width: 100%;">This is the text
that can also be a <a href="http://www.w3schools.com/" class="comments" target="_blank">link</a></div>
</div> |
And you need some JavaScript. Put it in the "head"-section or where you have your JavaScript:
<script type="text/javascript">
function Browser() {
var ua, s, i;
this.isIE = false;
this.isNS = false;
this.version = null;
ua = navigator.userAgent;
s = "MSIE";
if ((i = ua.indexOf(s)) >= 0) {
this.isIE = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}
s = "Netscape6/";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}
// Treat any other "Gecko" browser as NS 6.1.
s = "Gecko";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = 6.1;
return;
}
}
var browser = new Browser();
// Global object to hold drag information.
var dragObj = new Object();
dragObj.zIndex = 0;
function dragStart(event, id) {
var el;
var x, y;
// If an element id was given, find it. Otherwise use the element being
// clicked on.
if (id)
dragObj.elNode = document.getElementById(id);
else {
if (browser.isIE)
dragObj.elNode = window.event.srcElement;
if (browser.isNS)
dragObj.elNode = event.target;
// If this is a text node, use its parent element.
if (dragObj.elNode.nodeType == 3)
dragObj.elNode = dragObj.elNode.parentNode;
}
// Get cursor position with respect to the page.
if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
// Save starting positions of cursor and element.
dragObj.cursorStartX = x;
dragObj.cursorStartY = y;
dragObj.elStartLeft = parseInt(dragObj.elNode.style.left, 10);
dragObj.elStartTop = parseInt(dragObj.elNode.style.top, 10);
if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
if (isNaN(dragObj.elStartTop)) dragObj.elStartTop = 0;
// Update element's z-index.
dragObj.elNode.style.zIndex = ++dragObj.zIndex;
// Capture mousemove and mouseup events on the page.
if (browser.isIE) {
document.attachEvent("onmousemove", dragGo);
document.attachEvent("onmouseup", dragStop);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS) {
document.addEventListener("mousemove", dragGo, true);
document.addEventListener("mouseup", dragStop, true);
event.preventDefault();
}
}
function dragGo(event) {
var x, y;
// Get cursor position with respect to the page.
if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
// Move drag element by the same amount the cursor has moved.
dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
dragObj.elNode.style.top = (dragObj.elStartTop + y - dragObj.cursorStartY) + "px";
if (browser.isIE) {
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS)
event.preventDefault();
}
function dragStop(event) {
// Stop capturing mousemove and mouseup events.
if (browser.isIE) {
document.detachEvent("onmousemove", dragGo);
document.detachEvent("onmouseup", dragStop);
}
if (browser.isNS) {
document.removeEventListener("mousemove", dragGo, true);
document.removeEventListener("mouseup", dragStop, true);
}
}
</script> |
I got the code and idea from , which in turn got it from .
This drag-and-drop functionality can pretty easy be accomplished using as well as I will explain and give examples to later on.
One obvious extra-feature that should be added that I can think of is to "remember" the drag box settings for each user. This should be quite easily done using cookies. I will implement this sometime soon and let you know here as usual.
