peter
Guest
|
This is by no means a perfect script. It is experimental. Feel free to use it to learn from or modify how you like, I have another version which I don't wish to release yet which fixes a few bugs, but this sort of works.... drag.jsvar obj, offsetY, rOs = [], temp = [];
var drag = { lastY : 0,
start : function(evt){ var target = (evt.target)? evt.target : evt.srcElement; var curID = (target.parentNode.id)? target.parentNode : "";
if(curID && curID.nodeName.toLowerCase() == "tr"){ obj = document.getElementById(curID.id); obj.style.zIndex = "100"; drag.lastY = drag.getPos(curID.id).top; } else { obj = null; }
if(obj){ if(document.body && document.body.setCapture){ document.body.setCapture(); } if(evt.pageY){ offsetY = evt.pageY - ((obj.offsetTop)? obj.offsetTop : obj.style.top); } else if(typeof evt.offsetY != "undefined"){ offsetY = evt.offsetY - ((evt.offsetY < -2)? 0 : document.body.scrollTop); offsetY -= (document.body.parentNode && document.body.parentNode.scrollTop)? document.body.parentNode.scrollTop : 0; } else if(typeof evt.clientY != "undefined"){ offsetY = evt.clientY - ((obj.offsetTop)? obj.offsetTop : 0); } return false; } },
draw : function(){ rOs.sort(); var tbRows = document.getElementById("tb");
while(tbRows.hasChildNodes()){ tbRows.removeChild(tbRows.firstChild); }
drag.looped = true;
for(d = 0; d < rOs.length; d ++){ tbRows.appendChild(rOs[d][0][1]); } drag.setup(); },
getPos : function(obj){ var offsetTrail = document.getElementById(obj); var offsetLeft = 0; var offsetTop = 0; while(offsetTrail){ offsetLeft += offsetTrail.offsetLeft; offsetTop += offsetTrail.offsetTop; offsetTrail = offsetTrail.offsetParent; } return { left: offsetLeft, top: offsetTop }; },
moveTo : function(obj, y){ if(obj){ var temp = []; var tbRows = document.getElementById("tb");
for(r = 0; r < tbRows.rows.length; r ++){ if(obj.rowIndex == tbRows.rows.item(r).rowIndex){ if(tbRows.rows.item(r + 1) || tbRows.rows.item(r - 1)){ drag.stop = false; if(tbRows.rows.item(r + 1) && obj.offsetTop >= (tbRows.rows.item(r + 1).offsetTop)){ if(rOs[obj.rowIndex]){ drag.lastY = tbRows.rows.item(r + 1).offsetTop; rOs[obj.rowIndex][0][0] = parseInt(rOs[obj.rowIndex][0][0]) + 15; drag.draw(); } }
// Something is wrong here
if(tbRows.rows.item(r - 1) && parseInt(obj.style.top) < tbRows.rows.item(r - 1).offsetTop && obj.offsetTop >= y){ if(rOs[obj.rowIndex]){ drag.lastY = tbRows.rows.item(r - 1).offsetTop; rOs[obj.rowIndex][0][0] = parseInt(rOs[obj.rowIndex][0][0]) - 15; drag.draw(); } } } else { drag.stop = true; } } } if(!drag.stop){ obj.style.top = y; } } },
dragIt : function(evt){ evt = (evt)? evt : event; if(obj){ if(evt.pageX){ drag.moveTo(obj, (evt.pageY - offsetY)); } else if(evt.clientY){ drag.moveTo(obj, (evt.clientY - offsetY)); } obj.className = "dragging"; obj.style.zIndex = "100"; evt.cancelBubble = true; return false; } },
release : function(evt){ if(obj){ obj.style.top = drag.lastY; obj.style.zIndex = "0"; if(document.body && document.body.releaseCapture){ document.body.releaseCapture(); } obj.className = ""; obj = null; } },
setup : function(){ var iAdd = 10; var tBody = document.getElementById("tb"); for(r = 0; r < tBody.rows.length; r ++){ rOs[r] = [ [iAdd, tBody.rows.item(r)] ];
tBody.rows.item(r).id = r; tBody.rows.item(r).onmousedown = function(){ this.style.cursor = "pointer"; }
if(!drag.looper){ tBody.rows.item(r).style.top = drag.getPos(tBody.rows.item(r).id).top; tBody.rows.item(r).style.left = drag.getPos(tBody.rows.item(r).id).left; temp[temp.length] = drag.getPos(tBody.rows.item(r).id).top; } else { tBody.rows.item(r).style.top = temp[r]; }
tBody.rows.item(r).style.zIndex = "0"; tBody.rows.item(r).id = r; iAdd += 10; }
drag.looper = true;
for(r = 0; r < tBody.rows.length; r ++){ tBody.rows.item(r).style.position = "absolute"; } },
initDrag : function(){ drag.setup();
if(document.body && document.body.addEventListener){ document.addEventListener("mousedown", drag.start, true); document.addEventListener("mousemove", drag.dragIt, true); document.addEventListener("mouseup", drag.release, true); } document.onmousedown = drag.start; document.onmousemove = drag.dragIt; document.onmouseup = drag.release; return; } }; drag.html<html> <head> <title>Drag</title> <style tyep="text/css">
.dragging { background-color: #ffffee }
table td { border: 1px solid black; width: 100px; }
</style> <script type="text/javascript" src="drag.js"></script> </head> <body onload="drag.initDrag()"> <table cellpadding="0" cellspacing="2"> <tbody id="tb"> <tr> <td width="100">aaa</td> </tr> <tr> <td width="100">ccc</td> </tr> <tr> <td width="100">eee</td> </tr> <tr> <td width="100">ggg</td> </tr> <tr> <td width="100">iii</td> </tr> </tbody> </table>
</body> </html>If anyone creates anything decent from it, let me know
Last Edit: Nov 5, 2005 18:28:19 GMT by peter
|
|
|
|
Pretty good, too bad IE doesn't like it, If I had any suggestions it would be to append the drag/drop re-order to any element, as some parts are hard coded. I did make a drag and drop constructer class, but it just allows free movement anywhere, no limitation (ie: drag limiting) or special stuff for it yet (ie: table re-order, designated drop locations).
- Zero Tolerance
|
|
|
|
peter
Guest
|
Never tested it in IE . IE supports drag handlers, it would make things so much easier if all browsers supported them. I found it pretty hard trying to code it so you could do it for any sort of element, I got bored of it in the end . Doubt I will ever go back to it, lol.
|
|
|
|
these are times when I feel left behind
|
|
|
|
I do too Crazy. Anyway, very nice Peter..... I'm amazed to say the least. It makes me seem pathetic and weak. Also, I found one of those glitches. You can't make it the first row very easily.
|
|
|
|
peter
Guest
|
Thanks. Yeah, that is one of the bugs. It's an early script, but handy if you want to learn from it so you can create your own version
|
|
|
|
Know any good sites for us with um...what do you need for that? Seems like a page's coordinates...
|
|
|
peter
Guest
|
There aren't any good sites i'm afraid. If there are any, then it is specifically aimed towards the IE handlers.
|
|
|
|
Pretty cool IE sucks, like I said before, Mozilla should take over the internet and make Firefox the main browser
|
|
|
|
They will at this rate, though it'll take years, and depends on IE7.
|
|
|
|