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.

download jquery. then download the jquery ui plugin, this contains draggable and droppable which are called by .draggable() and .droppable().

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/dynamicindex11/domdrag/example.htm

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


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


<!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?

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

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.

I replaced the original stopDrag, with that and the entire drag and drop process stopped.

I tried this:


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

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.

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