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.
|
|
|
|
|
