SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drag and Drop Help

    Hi, I'm retired and playing around with some HTML pages. There are three short descriptions with a link to the page (standard HTML stuff that). I know that Javascript can do divs for this or send me to the page, but from there on my Javascript knowledge is extremely limited..

    The scenario I'm thinking of is different than all this.

    I have seen some drag and drop things where you drag the "A" block into a center panel and it stays there - which is not what I would like to achieve.

    The 3 "links"
    ---------------
    The A's
    Anything could go here....

    Besomes
    Because beyond it is....

    Charlie
    Computers and cans of beer help when....
    ---------------

    How do I drag the short block into a panel and, when it hits there, I am taken to another page (the target page that originally happened when I clicked a link)?

    I hope someone can help please, thanks.

  2. #2
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    download jquery. then download the jquery ui plugin, this contains draggable and droppable which are called by .draggable() and .droppable().

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Using both jQuery and jQuery UI can be a be over done considering the size of both of them. Here is a nice native JS drag and drop script i found which you can easily accommodate to your needs.

    http://www.dynamicdrive.com/dynamicindex11/domdrag/
    http://www.dynamicdrive.com/dynamici...ag/example.htm

  4. #4
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, yeah, Jquery is way too big for what I need. It seems more suited to sites that use a lot of JS on all kinds of pages with various deals going on.

    The domdrag is okay, but involves far too much extra coding as Perl is also involved in the whole thing.

    I looked around and found this:
    dnd.js
    Code:
    <!-- Begin
    // start dragging
    function startDrag(e){
     // determine event object
     if(!e){var e=window.event};
     // determine target element
     var targ=e.target?e.target:e.srcElement;
     if(targ.className!='ddb'){return};
     // calculate event X,Y coordinates
        offsetX=e.clientX;
        offsetY=e.clientY;
     // assign default values for top and left properties
     if(!targ.style.left){targ.style.left='0px'};
     if(!targ.style.top){targ.style.top='0px'};
     // calculate integer values for top and left properties
        coordX=parseInt(targ.style.left);
        coordY=parseInt(targ.style.top);
        drag=true;
     // move div element
        document.onmousemove=dragDiv;
    }
    // continue dragging
    function dragDiv(e){
     if(!drag){return};
     if(!e){var e=window.event};
     var targ=e.target?e.target:e.srcElement;
     // move div element
       targ.style.left=coordX+e.clientX-offsetX+'px';
       targ.style.top=coordY+e.clientY-offsetY+'px';
       return false;
    }
    // stop dragging
    function stopDrag(){
     drag=false;
    }
    window.onload=function(){
     document.onmousedown=startDrag;
     document.onmouseup=stopDrag;
    }
    // End -->
    With it I can have as many drag boxes as I want (good because they will be generated by a Perl script) and the JS doesn't have to be touched.

    Here is where I've got to (right now it's just a toy and does nothing)
    dnd.html
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>DnD</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body {font-family: Verdana, Arial; font-size:12px;}
    table {font-size:12px; }
    .ddb {position:relative; width:80px; height:80px; background:#fff; border:1px solid #ccc; padding:2px; cursor:pointer;}
    </style>
    <script language="JavaScript" type="text/javascript" src="dnd.js"></script>
    </head>
    <body>
    <table cellpadding="10" cellspacing="0" border="1" width="95%">
    <tr align="left" valign="top"><td width="100">
    <p class="ddb"><b>AAA</b><br>The AAA text....</p>
    <p class="ddb"><b>BBB</b><br>The BBB text....</p></td>
    <td width="20">&nbsp;</td>
    <td align="center" id="goto">Drag item to here to open new window with target page</td>
    </tr></table>
    </body>
    </html>
    The idea is to do something with the right hand table cell, so that when the box is let go, I am taken to another page. I am assuming that somehow the cell is defined by a Javascript (as opposed to CSS?) ID so that when it's dropped, something added to the function stopDrag will kick in the target page the same as a link would if clicked. Does that make sense?

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Personally i don't know the event by heart that allows you to check where an element exists in the DOM by it might be worth trying

    Code JavaScript:
    function stopDrag(){
        drag = false;
        var e = document.getElementById('goto');
     
        while(e.hasChildNodes()){
            if (e.firstChild.getAttribute('id') == 'drag_drop_box_id'){
                // Do something!
                break;
            } else {
                e.removeChild(e.firstChild);
                continue;
            }
        }
    }

    I haven't tested it but it should work.

  6. #6
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I replaced the original stopDrag, with that and the entire drag and drop process stopped.

    I tried this:
    Code:
    // stop dragging
    function stopDrag(){
        drag = false;
    	window.onload=function(){
    	 document.onmousedown=startDrag;
    	 document.onmouseup=stopDrag;
        var e = document.getElementById('goto');
       
        while(e.hasChildNodes()){
            if (e.firstChild.getAttribute('id') == 'drag_drop_box_id'){
                document.write('I should see this text. Yes\?');
                break;
            } else {
                e.removeChild(e.firstChild);
                continue;
            }
        }
    }
    }
    The item dropped, but nothing happened. I assumed I would get the doc write print, but didn't. I kind of guessing here , so may be way off course.

  7. #7
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Personally i have never done a drag and drop element into another element so i don't know off by heart the event that triggers that but i know that it can be done.

  8. #8
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but i know that it can be done.
    I figured it must be able to work somehow. JS is pretty comprehensive language so there's an answer somewhere.

    The idea is just that. One of those wacky thoughts that arise on those, "what if I did this..." moments.

    At least I'm further along than when we began and the base code is small.

    Thanks a lot for your help and input. If you wake up in the middle of the night and go Ahhhaa (like I do on occasion), then we'll have another try


Bookmarks

Posting Permissions

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