Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Adirondacks
    Posts
    516
    Thanks
    4
    Thanked 4 Times in 4 Posts

    drag and drop help

    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

  • #2
    New Coder
    Join Date
    Mar 2005
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not sure what your code is trying to do, but i stopped the script error by changing the body tag to:

    Code:
    <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...
    "It doesn't matter if I'm optomistic or not, nothing ever works out for me."

  • #3
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Adirondacks
    Posts
    516
    Thanks
    4
    Thanked 4 Times in 4 Posts
    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?

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Adirondacks
    Posts
    516
    Thanks
    4
    Thanked 4 Times in 4 Posts
    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

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Adirondacks
    Posts
    516
    Thanks
    4
    Thanked 4 Times in 4 Posts
    see this
    http://dhtmlkitchen.com/scripts/drag...ble/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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •