Add "Handles" to these draggable boxes?

End User · #11 (**permalink**) 10-14-09, 04:24 PM

Jerry, I appreciate all the work you put into this. I can't, unfortunately, use any of the typical JS libraries like mootools, Prototype, or JQuery.

I've been working on the last script I mentioned, the one by Walter Zorn (Drag, Snap, & Sort). I've gotten it to do *everything* that I need, but I'm too dumb to figure out how to adjust the spacing. I kept working on it because I figured that sooner or later either I'd figure it out or someone else would.

It's driving me to distraction, because I've got it working perfectly, with the exception of being able to adjust the box size and spacing and still have it 'snap' properly. Oy. It's always something, lol...

After all the time you've spent on this, I hesitate to even dare to ask if you'd take a look at it, but I suspect you'd take a peek at the code and go "Oh, yeah, click click click...", and it'd be done. (If you don't want to, no problem, I know your plate is pretty full with other stuff.)

job0107 · #12 (**permalink**) 10-15-09, 03:22 AM

This script is not very flexible either.
The problem is, you have to calculate almost everything by hand.

I put all the styles in the <style> element except "top".

The "top" attribute must be declared in the div elements.

"top" for the first div element is set to 150px.

The value for the space between each div element is stored in var sSpace.
I have it set to 5.

To calculate the "top" attribute for each successive div element, add the height and sSpace values to the "top" attribute of the previous div element.
Example:
First div element "top" attribute equals 150px.
Second div element "top" attribute equals 150 + height (20) + sSpace (5) equals 175px.
Third div element "top" attribute equals 175 + height (20) + sSpace (5) equals 200px.
Fourth div element "top" attribute equals 200 + height (20) + sSpace (5) equals 225px.
Fifth div element "top" attribute equals 225 + height (20) + sSpace (5) equals 250px.

If you change the height and/or sSpace then you must recalculate the "top" attributes.

Note: The height of the div elements can not be less than 19px.
If you try to make the height less than 19px , then it will be set to 19px.
Unfortunately this problem exists somewhere in the wz_dragdrop.js 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>
.commonStyle
{
 position:absolute;
 left:100px;
 width:200px;
 height:20px;
 }
#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>
<p align="center"><b><big>Sort Draggable Elements</big><br>and let them snap to predefined positions</b></p>
<p align="center"><a href="demos.htm" target="_top">Back, Zur&uuml;ck</a></p>
<div class="commonStyle" id="lyr0" style="top:150px;"></div>
<div class="commonStyle" id="lyr1" style="top:175px;"></div>
<div class="commonStyle" id="lyr2" style="top:200px;"></div>
<div class="commonStyle" id="lyr3" style="top:225px;"></div>
<div class="commonStyle" id="lyr4" style="top:250px;"></div>
<script type="text/javascript">
<!--

SET_DHTML(CURSOR_MOVE, "lyr0", "lyr1", "lyr2", "lyr3", "lyr4");

var sSpace = 5;
var sObj = document.getElementById("lyr0");
var sTop = parseInt(sObj.style.top.substr(0,sObj.style.top.length-2));;
var sHeight = parseInt(sObj.style.height.substr(0,sObj.style.height.length-2));
var sLeft = parseInt(sObj.style.left.substr(0,sObj.style.left.length-2));
var dy = sHeight+sSpace;
var posOld;

// Array intended to reflect the order of the draggable items
var aElts = [dd.elements.lyr0, dd.elements.lyr1, dd.elements.lyr2, dd.elements.lyr3, dd.elements.lyr4];

function my_PickFunc()
{
    // Store position of the item about to be dragged
    // so we can interchange positions of items when the drag operation ends
    posOld = dd.obj.y;
}

function my_DropFunc()
{
    // Calculate the snap position which is closest to the drop coordinates
    var y = dd.obj.y+dy/2;
    y = Math.max(sTop, Math.min(y - (y-sTop)%dy, sTop + (aElts.length-1)*dy));

    // Index of the new position within the spatial order of all items
    var i = (y-sTop)/dy;

    // Interchange the positions of the two items
    aElts[i].moveTo(sLeft, posOld);

    // Let the dropped item snap to position
    dd.obj.moveTo(sLeft, y);

    // Update the array according to the changed succession of items
    aElts[(posOld-sTop)/dy] = aElts[i];
    aElts[i] = dd.obj;
}
//-->
</script>
</body>
</html>

End User · #13 (**permalink**) 10-15-09, 01:07 PM

Geez, next time don't do it so fast!

lol

Thank you, Jerry. This is exactly what I needed to move forward, and I'm indebted to you for your help. My wife says I ought to drive down to Tacoma and take you to dinner, so name the place and we'll do it.

Quote:

Originally Posted by job0107

This script is not very flexible either.
The problem is, you have to calculate almost everything by hand.

I put all the styles in the <style> element except "top".

The "top" attribute must be declared in the div elements.

"top" for the first div element is set to 150px.

The value for the space between each div element is stored in var sSpace.
I have it set to 5.

To calculate the "top" attribute for each successive div element, add the height and sSpace values to the "top" attribute of the previous div element.
Example:
First div element "top" attribute equals 150px.
Second div element "top" attribute equals 150 + height (20) + sSpace (5) equals 175px.
Third div element "top" attribute equals 175 + height (20) + sSpace (5) equals 200px.
Fourth div element "top" attribute equals 200 + height (20) + sSpace (5) equals 225px.
Fifth div element "top" attribute equals 225 + height (20) + sSpace (5) equals 250px.

If you change the height and/or sSpace then you must recalculate the "top" attributes.

Note: The height of the div elements can not be less than 19px.
If you try to make the height less than 19px , then it will be set to 19px.
Unfortunately this problem exists somewhere in the wz_dragdrop.<acronym title="JavaScript">js</acronym> 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>
.commonStyle
{
 position:absolute;
 left:100px;
 width:200px;
 height:20px;
 }
#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.<acronym title="JavaScript">js</acronym>"></script>
<p align="center"><b><big>Sort Draggable Elements</big><br>and let them snap to predefined positions</b></p>
<p align="center"><a href="demos.htm" target="_top">Back, Zur&uuml;ck</a></p>
<div class="commonStyle" id="lyr0" style="top:150px;"></div>
<div class="commonStyle" id="lyr1" style="top:175px;"></div>
<div class="commonStyle" id="lyr2" style="top:200px;"></div>
<div class="commonStyle" id="lyr3" style="top:225px;"></div>
<div class="commonStyle" id="lyr4" style="top:250px;"></div>
<script type="text/javascript">
<!--

SET_DHTML(CURSOR_MOVE, "lyr0", "lyr1", "lyr2", "lyr3", "lyr4");

var sSpace = 5;
var sObj = document.getElementById("lyr0");
var sTop = parseInt(sObj.style.top.substr(0,sObj.style.top.length-2));;
var sHeight = parseInt(sObj.style.height.substr(0,sObj.style.height.length-2));
var sLeft = parseInt(sObj.style.left.substr(0,sObj.style.left.length-2));
var dy = sHeight+sSpace;
var posOld;

// Array intended to reflect the order of the draggable items
var aElts = [dd.elements.lyr0, dd.elements.lyr1, dd.elements.lyr2, dd.elements.lyr3, dd.elements.lyr4];

function my_PickFunc()
{
    // Store position of the item about to be dragged
    // so we can interchange positions of items when the drag operation ends
    posOld = dd.obj.y;
}

function my_DropFunc()
{
    // Calculate the snap position which is closest to the drop coordinates
    var y = dd.obj.y+dy/2;
    y = Math.max(sTop, Math.min(y - (y-sTop)%dy, sTop + (aElts.length-1)*dy));

    // Index of the new position within the spatial order of all items
    var i = (y-sTop)/dy;

    // Interchange the positions of the two items
    aElts[i].moveTo(sLeft, posOld);

    // Let the dropped item snap to position
    dd.obj.moveTo(sLeft, y);

    // Update the array according to the changed succession of items
    aElts[(posOld-sTop)/dy] = aElts[i];
    aElts[i] = dd.obj;
}
//-->
</script>
</body>
</html>

End User · #14 (**permalink**) 10-16-09, 11:16 AM

Just so you know, this is working out very well- it' is indeed the solution that I needed.

Calculating the spacing and 'top' values isn't a big deal, I do it programmatically as the list is built and it works fine.

I'm curious if the positioning has to be absolute, or if the divs can be placed within another div for some relative positioning? I've tried a few things but it seems like it really, really wants to be positioned as 'absolute'.

I can use it either way, I'm just curious if it's possible to position it in a relative way. (??)

job0107 · #15 (**permalink**) 10-20-09, 02:00 AM

Hello End User,

After reading the instructions for wz_dragdrop (found here: Drag&Drop for Images and Layers: Interface of the JavaScript Library),
I came up with a very simple solution that allows you to use either relative or absolute positioning.

I have taken the five div's and enclosed them in a div container.
All elements are set to relative positioning.
Please note:
All elements you want to make drag&drop must have their position property set in the CSS ( either relative or absolute).
By using the wz_dragdrop methods, I was able to overcome the 19px minimum height barrier that must have been programmed into your last code.

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,dropTarget;
function my_PickFunc(){
 sElementPosX=dd.obj.x;
 sElementPosY=dd.obj.y;
}
function my_DropFunc(){
 dropTarget=dd.obj.getEltBelow();
 dropTarget!=null?swapElements():restoreElement();
}
function swapElements(){
 dd.obj.moveTo(dropTarget.x,dropTarget.y);
 dd.elements[dropTarget.name].moveTo(sElementPosX,sElementPosY);
}
function restoreElement(){
 dd.obj.moveTo(sElementPosX,sElementPosY);
}
-->
</script>
</body>
</html>

End User · #16 (**permalink**) 10-20-09, 12:00 PM

Thank you! (again)

Sheesh- I looked through the interface docs twice and either missed or didn't understand whatever it was you found in there about relative positioning.

In any case, thank you again for finding this; I'll be working on this today and I'll let you know how it goes!

Thanks again, Jerry.

Quote:

Originally Posted by job0107

After reading the instructions for wz_dragdrop (found here: Drag&Drop for Images and Layers: Interface of the JavaScript Library),
I came up with a very simple solution that allows you to use either relative or absolute positioning.

job0107 · #17 (**permalink**) 10-20-09, 10:45 PM

Quote:

Originally Posted by End User

Thank you! (again)

Sheesh- I looked through the interface docs twice and either missed or didn't understand whatever it was you found in there about relative positioning.

I found this on the main page:

Quote:

How to include the Drag & Drop Script
1. HTML File: Names for Drag&Drop elements
Images: Each of the images to be set draggable requires a unique name, as for instance: <img name="name1" src="someImg.jpg" width="240" height="135">
Width and height attributes are mandatory and should be absolute numbers like width="240", rather than relative ones like width="33%".
Layers: Each one requires a unique ID and, contrary to images, must be positioned relatively or absolutely: <div id="name2" style="position:absolute;...">Content</div>.

End User · #18 (**permalink**) 10-20-09, 10:56 PM

Okay, one last question (I hope)....in this version, how would I find the order of the elements after they've been rearranged? The function that I accessed to find that info is gone in the latest example you provided. I went over the docs on the WZ site in detail, but I can't seem to put it together.

For example, I've been trying to find the position of each of the elements and then sort them to get the order, but I'm not getting that to work at all so far. The previous version had an array named "aElts", that was updated with the new order after an element was dropped, but that's not in this incarnation. (??)

I swear, it seems like the more I work with javascript, the less I know.

job0107 · #19 (**permalink**) 10-20-09, 11:27 PM

Quote:

Originally Posted by End User

Okay, one last question (I hope)....in this version, how would I find the order of the elements after they've been rearranged? The function that I accessed to find that info is gone in the latest example you provided. I went over the docs on the WZ site in detail, but I can't seem to put it together.

For example, I've been trying to find the position of each of the elements and then sort them to get the order, but I'm not getting that to work at all so far. The previous version had an array named "aElts", that was updated with the new order after an element was dropped, but that's not in this incarnation. (??)

I swear, it seems like the more I work with javascript, the less I know.

What do you need the aElts array for?

wz_dragdrop takes care of all that for you.

End User · #20 (**permalink**) 10-20-09, 11:43 PM

Quote:

Originally Posted by job0107

What do you need the aElts array for?

wz_dragdrop takes care of all that for you.

I need it (or some other method) for determining the order of the elements, since I'm using it for a drag & drop category sorting tool. The list of boxes/elements is created dynamically from the database, and the user can drag and drop them into whatever order he or she wants. In order to be able to save the arrangement I have to be able to know what order the elements are in after they're all done.

I saw reference to the "dd.elements" array in the documentation, but that doesn't get reordered when the elements are repositioned. The original example reordered the aElts array by doing some calculation on the 'margTop' and 'dy' params, but those params are no longer present.

I can get the two elements that are being affected in a drag and drop, and I was attempting to maintain an ordered array by exchanging their positions in the array as they were moved, but all I've found so far is about 97 different ways that I can't make work.

Add "Handles" to these draggable boxes?

Internet Services

Website Development

Tech Hardware