Add "Handles" to these draggable boxes?

job0107 · #1 (**permalink**) 10-21-09, 12:32 AM

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>

End User · #2 (**permalink**) 10-21-09, 08:56 AM

Quote:

Originally Posted by job0107

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.

job0107 · #3 (**permalink**) 10-21-09, 09:39 AM

Quote:

Originally Posted by End User

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.

End User · #4 (**permalink**) 10-21-09, 10:21 AM

Quote:

Originally Posted by job0107

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

Add "Handles" to these draggable boxes?

Internet Services

Website Development

Tech Hardware