If you need the aElts array for some other part of the program, than I have added it to the script.
But you must understand that the aElts array has nothing to do with the drag&drop functions.
I have merely added it to the script for other purposes you may have, but otherwise it is only adding time to the script and serves no purpose to the script.
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Drag, Snap and Sort</title><link rel="stylesheet" type="text/css" href="../../newwalterzorn.css"><style>
#dragItemsContainer
{
width:200px;
padding:10px;
padding-bottom:5px;
border:1px solid #000;
background:#ddd;
}
.commonStyle
{
position:relative;
width:200px;
height:15px;
margin-bottom:5px;
font-size:12px;
}
#lyr0{background:red;}
#lyr1{background:green;}
#lyr2{background:blue;}
#lyr3{background:yellow;}
#lyr4{background:purple;}
</style></head><body><script type="text/javascript" src="wz_dragdrop.js"></script><div id="dragItemsContainer"><div class="commonStyle" id="lyr0">Item 1</div><div class="commonStyle" id="lyr1">Item 2</div><div class="commonStyle" id="lyr2">Item 3</div><div class="commonStyle" id="lyr3">Item 4</div><div class="commonStyle" id="lyr4">Item 5</div><div><script type="text/javascript"><!--
SET_DHTML(CURSOR_MOVE,"lyr0","lyr1","lyr2","lyr3","lyr4");
var sElementPosX,sElementPosY,sElementName,dElementName,dropTarget,picElementPos,dropElementPos;
var aElts = new Array("lyr0","lyr1","lyr2","lyr3","lyr4");
function my_PickFunc(){
sElementPosX=dd.obj.x;
sElementPosY=dd.obj.y;
sElementName=dd.obj.name;
for(var i=0;i<aElts.length;i++){if(sElementName == aElts[i]){picElementPos = i;}}
}
function my_DropFunc(){
dropTarget=dd.obj.getEltBelow();
dropTarget!=null?swapElements():restoreElement();
dElementName=dropTarget.name;
for(var i=0;i<aElts.length;i++){if(dElementName == aElts[i]){dropElementPos = i;}}
arrange_aElts_Elements();
}
function swapElements(){
dd.obj.moveTo(dropTarget.x,dropTarget.y);
dd.elements[dropTarget.name].moveTo(sElementPosX,sElementPosY);
}
function restoreElement(){
dd.obj.moveTo(sElementPosX,sElementPosY);
}
function arrange_aElts_Elements()
{
var tempName1 = aElts[picElementPos];
var tempName2 = aElts[dropElementPos];
aElts[picElementPos] = tempName2;
aElts[dropElementPos] = tempName1;
}
--></script></body></html>
__________________
Jerry Broughton
Last edited by job0107; 10-21-09 at 12:41 AM.
The Following User Says Thank You to job0107 For This Useful Post:
If you need the aElts array for some other part of the program, than I have added it to the script.
But you must understand that the aElts array has nothing to do with the drag&drop functions.
I have merely added it to the script for other purposes you may have, but otherwise it is only adding time to the script and serves no purpose to the script.
Thank you for adding that.....yes, I know the aElts array is separate from the D&D functions and not part of the actual script.
Out of curiosity, how would you determine the order of the elements if you didn't use something like the aElts array? I was trying to find all of the vertical element positions (dd.elements.foo.y) and use those then determine the sorting order that way, but I wasn't having much luck with it.
Out of curiosity, how would you determine the order of the elements if you didn't use something like the aElts array? I was trying to find all of the vertical element positions (dd.elements.foo.y) and use those then determine the sorting order that way, but I wasn't having much luck with it.
Everything I checked gave the original order.
I couldn't find anything that would produce the changed order.
So using the aElts array seemed the only logical solution.
Using the x&y coordinates of the elements would require more programming then just swapping elements in an array.
And besides, after your array is setup the way you want it, there are a lot of function that you can use that are very efficient.
__________________
Jerry Broughton
Last edited by job0107; 10-21-09 at 09:48 AM.
The Following User Says Thank You to job0107 For This Useful Post:
Everything I checked gave the original order.
I couldn't find anything that would produce the changed order.
So using the aElts array seemed the only logical solution.
That's what I figured- I couldn't find any native function that exposed the new, rearranged order. That's why the aElts array was important to me.
Quote:
Originally Posted by job0107
Using the x&y coordinates of the elements would require more programming then just swapping elements in an array.
Yep...in fact, it required so much that it basically became somewhat of a death march for me.
Quote:
Originally Posted by job0107
And besides, after your array is setup the way you want it, there are a lot of function that you can use that are very efficient.
Walter Zorn's library is pretty slick, lots of powerful stuff in there for layer control, resizing, dragging, opacity, etc etc. I'm going to be experimenting with adding new elements on the fly, which looks like it should be pretty straightforward. (Famous last words...)
Use this script at your own risk.
Once you have clicked on a line, whether you have moved it or not, you can delete it by pressing any key.
You will be able to cancel the event but if you delete it you can not undo it.
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">
/* Don't change these options */
#movableNode{
position:absolute;
}
#arrDestInditcator{
position:absolute;
display:none;
width:100px;
}
/* End options that shouldn't be changed */
</style><script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, October 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var offsetYInsertDiv = -3; // Y offset for the little arrow indicating where the node should be inserted.
if(!document.all)offsetYInsertDiv = offsetYInsertDiv - 7; // No IE
var arrParent = false;
var arrMoveCont = false;
var arrMoveCounter = -1;
var arrTarget = false;
var arrNextSibling = false;
var leftPosArrangableNodes = false;
var widthArrangableNodes = false;
var nodePositionsY = new Array();
var nodeHeights = new Array();
var arrInsertDiv = false;
var insertAsFirstNode = false;
var arrNodesDestination = false;
function cancelEvent()
{
return false;
}
function getTopPos(inputObj)
{
var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null){
returnValue += inputObj.offsetTop;
}
return returnValue;
}
function getLeftPos(inputObj)
{
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
return returnValue;
}
function clearMovableDiv()
{
if(arrMoveCont.getElementsByTagName('LI').length>0){
if(arrNextSibling)arrParent.insertBefore(arrTarget,arrNextSibling); else arrParent.appendChild(arrTarget);
}
}
function initMoveNode(e)
{
clearMovableDiv();
if(document.all)e = event;
arrMoveCounter = 0;
arrTarget = this;
if(this.nextSibling)arrNextSibling = this.nextSibling; else arrNextSibling = false;
timerMoveNode();
arrMoveCont.parentNode.style.left = e.clientX + 'px';
arrMoveCont.parentNode.style.top = e.clientY + 'px';
return false;
}
function timerMoveNode()
{
if(arrMoveCounter>=0 && arrMoveCounter<10){
arrMoveCounter = arrMoveCounter +1;
setTimeout('timerMoveNode()',20);
}
if(arrMoveCounter>=10){
arrMoveCont.appendChild(arrTarget);
}
}
function arrangeNodeMove(e)
{
if(document.all)e = event;
if(arrMoveCounter<10)return;
if(document.all && arrMoveCounter>=10 && e.button!=1 && navigator.userAgent.indexOf('Opera')==-1){
arrangeNodeStopMove();
}
arrMoveCont.parentNode.style.left = e.clientX + 'px';
arrMoveCont.parentNode.style.top = e.clientY + 'px';
var tmpY = e.clientY;
arrInsertDiv.style.display='none';
arrNodesDestination = false;
if(e.clientX<leftPosArrangableNodes || e.clientX>leftPosArrangableNodes + widthArrangableNodes)return;
var subs = arrParent.getElementsByTagName('LI');
for(var no=0;no<subs.length;no++){
var topPos =getTopPos(subs[no]);
var tmpHeight = subs[no].offsetHeight;
if(no==0){
if(tmpY<=topPos && tmpY>=topPos-5){
arrInsertDiv.style.top = (topPos + offsetYInsertDiv) + 'px';
arrInsertDiv.style.display = 'block';
arrNodesDestination = subs[no];
insertAsFirstNode = true;
return;
}
}
if(tmpY>=topPos && tmpY<=(topPos+tmpHeight)){
arrInsertDiv.style.top = (topPos+tmpHeight + offsetYInsertDiv) + 'px';
arrInsertDiv.style.display = 'block';
arrNodesDestination = subs[no];
insertAsFirstNode = false;
return;
}
}
}
function arrangeNodeStopMove()
{
arrMoveCounter = -1;
arrInsertDiv.style.display='none';
if(arrNodesDestination){
var subs = arrParent.getElementsByTagName('LI');
if(arrNodesDestination==subs[0] && insertAsFirstNode){
arrParent.insertBefore(arrTarget,arrNodesDestination);
}else{
if(arrNodesDestination.nextSibling){
arrParent.insertBefore(arrTarget,arrNodesDestination.nextSibling);
}else{
arrParent.appendChild(arrTarget);
}
}
}
arrNodesDestination = false;
clearMovableDiv();
}
function saveArrangableNodes()
{
var nodes = arrParent.getElementsByTagName('LI');
var string = "";
for(var no=0;no<nodes.length;no++){
if(string.length>0)string = string + ',';
string = string + nodes[no].id;
}
document.forms[0].hiddenNodeIds.value = string;
// Just for testing
document.getElementById('arrDebug').innerHTML = 'Ready to save these nodes:<br>' + string.replace(/,/g,',<BR>');
document.forms[0].submit(); // Remove the comment in front of this line when you have set an action to the form.
}
function del_elm()
{
var ans = confirm("Are you sure you want to delete "+arrTarget.innerHTML+" ?");
if(ans){arrParent.removeChild(arrTarget);}
}
function initArrangableNodes()
{
arrParent = document.getElementById('arrangableNodes');
arrMoveCont = document.getElementById('movableNode').getElementsByTagName('UL')[0];
arrInsertDiv = document.getElementById('arrDestInditcator');
leftPosArrangableNodes = getLeftPos(arrParent);
arrInsertDiv.style.left = leftPosArrangableNodes - 5 + 'px';
widthArrangableNodes = arrParent.offsetWidth;
var subs = arrParent.getElementsByTagName('LI');
for(var no=0;no<subs.length;no++){
subs[no].onmousedown = initMoveNode;
subs[no].onselectstart = cancelEvent;
}
document.documentElement.onmouseup = arrangeNodeStopMove;
document.documentElement.onmousemove = arrangeNodeMove;
document.documentElement.onselectstart = cancelEvent;
document.documentElement.onkeydown = del_elm;
}
window.onload = initArrangableNodes;
</script></head><body><div class="konaBody"><H1>Arrange the "Articles" below by drag'n drop</H1></div><ul id="arrangableNodes"><li id="node1">Node no. 1</li><li id="node2">Node no. 2</li><li id="node3">Node no. 3</li><li id="node4">Node no. 4</li><li id="node5">Node no. 5</li><li id="node6">Node no. 6</li><li id="node7">Node no. 7</li><li id="node8">Node no. 8</li><li id="node9">Node no. 9</li><li id="node10">Node no. 10</li><li id="node11">Node no. 11</li><li id="node12">Node no. 12</li><li id="node13">Node no. 13</li><li id="node14">Node no. 14</li><li id="node15">Node no. 15</li></ul><p><a href="javascript:;" onclick="saveArrangableNodes();return false">Save</a></p><div id="movableNode"><ul></ul></div><div id="arrDestInditcator"><img src="insert.gif"></div><div id="arrDebug"></div><form method="post" action="http://localhost/7sac/music.php?action=test"><input type="hidden" name="hiddenNodeIds"><input name="name" value=""></form></body></html>
Linear Mode
