...

View Full Version : Help with drag and drop links



KineticSixx
01-24-2012, 04:50 PM
I am creating a website that runs an iFrame with website displayed in it. On that page, in the frame, there is a simple href hyperlink. I have a text element next to the iFrame that is acting as an address bar. I want to be able to drag the link from the frame to the address bar and ondrop have the iframe redirect to the dragged link url. Here is the code I have


<html>
<head>
<style>
#NetFrame {
border:2px solid #0A9;
height:650px;
width:75%;
Position: absolute;
top:2%;
left:25%;

}
#url {
width:25%;
height:650px;
}
</style>
<script type="text/javascript">
function getUrl() {
var source = document.getElementById('url').value;
loadUrl(source);
}
function loadUrl(source) {
var showUrl = document.getElementById('NetFrame');

NetFrame.src = source;

document.getElementById('url').value="";
}
</script>
</head>
<body>
<form>
<input type="text" id="url" onDragEnd="getUrl()"/>

</form>
<iframe src="link1.html" id="NetFrame"> </iframe>
</body>
</html>


The iFrame is called NetFrame and the Text element is url. I have not coded in 6 years and am stuck here. Please Help, and be specific you are explaining to an absolute novice.

KineticSixx
01-25-2012, 03:59 PM
70 reads and no replies? :(

xelawho
01-25-2012, 04:38 PM
well, we like to ponder a little sometimes :D

firstly, onDragEnd applies to the element getting dragged, not the destination, so the links in your iframe document should look like this:


<a href="blahblah.htm" onDragEnd="parent.loadUrl(this.href)">blah</a>

next, it seems that your parent page code can be simplified, like this:



<!DOCTYPE html>
<html>
<head>
<style>
#NetFrame {
border:2px solid #0A9;
height:650px;
width:75%;
Position: absolute;
top:2%;
left:25%;

}
#url {
width:25%;
height:650px;
}
</style>

</head>
<body>
<form>
<input type="text" id="url"/>
</form>
<iframe src="link1.html" id="NetFrame"> </iframe>
<script type="text/javascript">
function loadUrl(source) {
document.getElementById('NetFrame').src = source;
document.getElementById('url').value="";
}
</script>
</body>
</html>

(tested in firefox, but I suspect there may be cross-browser issues... you should check)

hope that helps :thumbsup:

xelawho
01-25-2012, 05:31 PM
... although it occurs to me that if you want to check that the elelemt did in fact get dragged into the text input you should be doing this:


<a href="blahblah.htm" ondragend="parent.loadUrl()">blah</a>

and


function loadUrl() {
var source = document.getElementById('url').value;
if(source!=""){
document.getElementById('NetFrame').src = source;
document.getElementById('url').value="";
}
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum