View Full Version : drag and drop help

06-02-2005, 01:44 AM
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:

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

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

function init2() {
if (ns4) {document.captureEvents(Event.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) {
} 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)
} else {
var imgObj = window.event.srcElement
if (imgObj.parentElement.id.indexOf("picture") != -1) {
selectedObj = imgObj.parentElement.style
selectedObj = null
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) {
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) {
document.onmousedown = engage
document.onmousemove = dragIt
document.onmouseup = release
<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>
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

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

06-02-2005, 03:23 PM

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':

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?

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

06-03-2005, 01:44 AM
see this

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

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?