drag and drop help

FJbrian

06-02-2005, 01:44 AM

Hi,
A couple years back, I cut and pasted some code, alterred it etc. Now I'm trying to drag and drop form elements(to process later) instead of pics.
I haven't made my mind up between text boxes and buttons but....whatever.
So how do I use form elements instead of pics.
Here's code:
<HTML>
<head>
<TITLE>Script</TITLE>

<style type="text/css">
#picture1 {position:absolute; left:20; top:10; z-index:0}
#picture2 {position:absolute; left:180; top:10; z-index:0}
#picture3 {position:absolute; left:340; top:10; z-index:0}
#picture4 {position:absolute; left:500; top:10; z-index:0}
#picture5 {position:absolute; left:660; top:10; z-index:0}
#picture6 {position:absolute; left:20; top:50; z-index:0}
#picture7 {position:absolute; left:180; top:50; z-index:0}
#picture8 {position:absolute; left:340; top:50; z-index:0}
#picture9 {position:absolute; left:500; top:50; z-index:0}
#picture10 {position:absolute; left:660; top:50; z-index:0}
#picture11 {position:absolute; left:20; top:100; z-index:0}
#picture12 {position:absolute; left:180; top:100; z-index:0}
#picture13 {position:absolute; left:340; top:100; z-index:0}
#picture14 {position:absolute; left:500; top:100; z-index:0}
#picture15 {position:absolute; left:660; top:100; z-index:0}
</STYLE>

<SCRIPT LANGUAGE="JavaScript">
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

function init2() {
if (ns4) {document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove=mousemove;
}
function mousemove(e) {
if (ns4) {var mouseX=e.pageX; var mouseY=e.pageY}
if (ie4) {var mouseX=event.x; var mouseY=event.y}
status="x= "+mouseX+", y= "+mouseY;
}
var isNav, isIE
if (parseInt(navigator.appVersion) >= 4) {
if (navigator.appName == "Netscape") {
isNav = true
} else {
isIE = true
}
}
function setZIndex(obj, zOrder) {
obj.zIndex = zOrder
}
function shiftTo(obj, x, y) {
if (isNav) {
obj.moveTo(x,y)
} else {
obj.filter = "invert()"
obj.pixelLeft = x
obj.pixelTop = y
}
}
var selectedObj
var offsetX, offsetY

function setSelectedElem(evt) {
if (isNav) {
var testObj
var clickX = evt.pageX
var clickY = evt.pageY
for (var i = document.layers.length - 1; i >= 0; i--) {
testObj = document.layers[i]
if ((clickX > testObj.left) &&
(clickX < testObj.left + testObj.clip.width) &&
(clickY > testObj.top) &&
(clickY < testObj.top + testObj.clip.height)) {
selectedObj = testObj
setZIndex(selectedObj, 100)
return
}
}
} else {
var imgObj = window.event.srcElement
if (imgObj.parentElement.id.indexOf("picture") != -1) {
selectedObj = imgObj.parentElement.style
setZIndex(selectedObj,100)
return
}
}
selectedObj = null
return
}
function dragIt(evt) {
if (selectedObj) {
if (isNav) {
shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY))
} else {
shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY))
return false
}
}
}
function engage(evt) {
setSelectedElem(evt)
if (selectedObj) {
if (isNav) {
offsetX = evt.pageX - selectedObj.left
offsetY = evt.pageY - selectedObj.top
} else {
offsetX = window.event.offsetX
offsetY = window.event.offsetY
}
}
return false
}
function release(evt) {
if (document.all) {selectedObj.filter = ""}
if (selectedObj) {
setZIndex(selectedObj, 0)
selectedObj = null
}

}
function setNavEventCapture() {
if (isNav) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}
}
function init() {
if (isNav) {
setNavEventCapture()
}
document.onmousedown = engage
document.onmousemove = dragIt
document.onmouseup = release
}
</SCRIPT>
</HEAD>
<BODY onLoad="init2()"bgcolor="whitesmoke" OnBlur="init()">
<DIV ID=picture1><IMG NAME="picturePic1" SRC="rmoss.jpg"></DIV>
<DIV ID=picture2><IMG NAME="picturePic2" SRC="pmanning.jpg"></DIV>
<DIV ID=picture3><IMG NAME="picturePic3" SRC="cportis.jpg"></DIV>
<DIV ID=picture4><IMG NAME="picturePic4" SRC="ejames.jpg"></DIV>
<DIV ID=picture5><IMG NAME="picturePic5" SRC="cdillon.jpg"></DIV>
<DIV ID=picture6><IMG NAME="picturePic6" SRC="cmartin.jpg"></DIV>
<DIV ID=picture7><IMG NAME="picturePic7" SRC="jlewis.jpg"></DIV>
<DIV ID=picture8><IMG NAME="picturePic8" SRC="pholmes.jpg"></DIV>
<DIV ID=picture9><IMG NAME="picturePic9" SRC="dculpepp.jpg"></DIV>
<DIV ID=picture10><IMG NAME="picturePic10" SRC="tholt.jpg"></DIV>
<DIV ID=picture11><IMG NAME="picturePic11" SRC="towens.jpg"></DIV>
<DIV ID=picture12><IMG NAME="picturePic12" SRC="salexand.jpg"></DIV>
<DIV ID=picture13><IMG NAME="picturePic13" SRC="ltomlins.jpg"></DIV>
<DIV ID=picture14><IMG NAME="picturePic14" SRC="wmcgahee.jpg"></DIV>
<DIV ID=picture15><input type="button" value="D. McAllister"></DIV>
</BODY>
</HTML>
Error I get is selectedObj is not an object line 111, char 21
that's refers to the if document.all line in the release function

Thanks in advance for your help, and yes I'm struggling to get back in the swing of things

WMJB

06-02-2005, 04:25 AM

I'm not sure what your code is trying to do, but i stopped the script error by changing the body tag to:

<BODY onLoad="init2();init()" bgcolor="whitesmoke" >

The onblur event was causing the trouble, probably because a variable wasn't initialised after the focus is returned to the window.. or something similar...

MikeFoster

06-02-2005, 03:23 PM

FYI...

Take a look at how some other people have implemented 'dragging'. Here's one of my demos (http://cross-browser.com/x/examples/drag2.php), and here's some other folks':
http://www.brothercake.com/site/resources/dbx/
http://www.walterzorn.com/dragdrop/dragdrop_e.htm
http://www.youngpup.net/2001/domdrag
http://dhtmlkitchen.com/scripts/draglib/demo/index.jsp

FJbrian

06-03-2005, 12:03 AM

thanks for the replies, very helpful.
I also want the dragging to sorta snap into place. I want to say this method is called "snap to grid" but I had no luck searching for that. Any ideas? I remember a tutorial dragging puzzle pieces into place but can't find it.

Can I make an input textbox dragg-able?

FJbrian

06-03-2005, 12:18 AM

Mike, right part of code is not visible to me. Using IE6. The lightblue side overlaps some of it.
I don't see where the content of those 3 boxes is.
Don't understand how you made the top draggable and the rest not. By using the div's(not tables) to separate em'?
you refer to drag1.php, where is that? I'd be interested in seeing PHP's drag methods and differences between PHP and javascript.

brothercake one uses cookies, not the direction I wanna go. If that's his username here, he's a pretty helpful guy though IIRC

walterzorn link is a pretty cool page

new baby in the house, will have to wait for a quiet moment to read that youngpup tutorial

last one is cool, that's exactly what I'm looking for and sorting columns? even cooler. THANKS!
Really appreciate you taking the time to put up those links

FJbrian

06-03-2005, 01:44 AM

see this
http://dhtmlkitchen.com/scripts/draglib/DragModule/demo/table/index.html

Some of the links on the site are NG
It says it adds values from a DB but I see no DB in the code. I downloaded the file, same thing.
It says there are 2 tutorials but doesn't link to em' here
http://dhtmlkitchen.com/scripts/draglib/index.jsp

Well, I looked for an array(to populate table cells) but didn't find any in the code.
I added some values amidst the td tags. It doesn't sort. Didn't expect it to but....no clue how to populate the table.
Any idea?