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