Ik wil de URL van een Drag and Drop link krijgen

Status
Niet open voor verdere reacties.
tim687

tim687

Terugkerende gebruiker
Lid geworden
25 apr 2010
Berichten
1.774
Beste leden,
Ik heb hier een code die perfect werkt voor een drag'n drop:

Code: 
function handleDragDropEvent(oEvent) {

                switch(oEvent.type) {
                    case "dragover":
                    case "dragenter":
                        oEvent.returnValue = false;
                        break;
                    case "drop":
                        alert(oEvent.dataTransfer.getData("URL"));
                }
            }
Nu denken jullie vast: "Waarom stel je deze vraag dan?"
Dat doe ik omdat de plaats waar je op moet draggen en droppen een input moet zijn.
Ik wil dit met een img of div doen
Hoe kan ik dit doen?
Ik heb er geen problemen mee als de img naar input wordt gewijzigd, maar hij moet er wel het zelfde uitzien als voorheen (met een afbeelding en geen randjes) ook moet er niet zijn te merken dat het een input is als je er bijv. met je muis over gaat, of als je er naar gaat "tabben" dat je er in kunt typen.

Wie kan mij helpen?

Hartelijk bedankt,
Tim
 
Laatst bewerkt:
Het is geen afbeelding die er wordt gedropt, maar ik zal de code even testen.
Bedankt!
EDIT: Hij werkt niet, en ik denk dat ik weet waarom: ik weet niet welk item er gedropt gaat worden (die komt van een andere site af) dus dit stukje van de code kan ik niet toepassen:

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
 
Laatst bewerkt:
Ik begrijp het niet goed? maar misschien is het vanuit mijzelf, maar je vroeg of je de event toe kunt passen op DIV's. De link laat zien hoe je een div de ontvanger kunt maken. De rest kan hetzelfde blijven toch? of moet je de event nu verder aanpassen omdat het een div is?
 
De event was een voorbeeld code van wat ik al heb. Ik bedoelde als vraag of je een link naar een img kan slepen en vervolgens de url van de link kan kopieeren zonder dat deze wordt geopend.
 
HTML: 
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
alert(data);

}
</script>
</head>
<body>

<p>test</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>


</body>
</html>

Als ik hier URL's op sleep krijg ik netjes een alert met de URL
 
Ja klopt, maar werkt dat ook op een <img>?
 
Eh ja?

vervang:

HTML: 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

HTML: 
<img id="mijnimage" src="mijn_image.gif" ondrop="drop(event)" ondragover="allowDrop(event)" width="336" height="69">

en je krijgt netjes de url in je alert
 
Ooh oke dankje! Ik zal het morgen proberen. Alvast wel trusten :-P
 
Hij doet het niet :-(
Dit is de code die de drop moet opvangen:
HTML: 
<div id="f1_container" class="left" onClick="requestIFrame(true,'Settings/LOL.txt')">
<div id="f1_card" class="shadow">
<div class="animation pic front face">

<img type="textarea"alt="ALTTEXT" title="Open website" src="Images/Logo.png" ondrop="drop(event)" ondragover="allowDrop(event)">

</div>

<div class="back face center">
    <p>Click to open the control pannel. Or drag'n drop files to add them to the download queue!</p>
    </div>
   

</div>
</div>

Ik heb het stukje met
HTML: 
ondrop="drop(event)" ondragover="allowDrop(event)"
(geprobeerd) zo te maken (mislukt)
Moet ik dit nog ergens anders doen in de div's??
Hartelijk bedankt,
Tim
 
Laatst bewerkt:
is de javascript in 'context'? heb je al een aantal alerts toegevoegd om te zien hoever je komt?

Ik heb mijn standalone voorbeeld getest en dat werkt. Ik vermoed dat OF de default niet is uitgezet OF dat de javascript out of context is binnen deze DIV's.
 
Wat bedoel je met context? Ik zal wel ff wat alerts toevoegen
EDIT:
Als ik iets er naar toe probeer te slepen, bijft er zo'n "niet mogelijk" tekentje staan bij mijn muis
 
Laatst bewerkt:
Hij doet het!!!
Maar ik kan dus niet vanuit een IFrame daar naar toe slepen. Hoe doe ik dit anders?
 
Debuggen van een afstand is moeilijk ;). Krijg je geen alert vanuit je iframe? of een lege alert?

Zijn de gesleepte links in je iframe volle URL's?
 
de links in mijn iframe zijn bestanden die worden gedownload (als je erop klikt), de pagina die daarin wordt weergegeven is niet van mij, dus daar heb ik geen controle over.
maar als ik diezelfde pagina in een nieuw venster open, dan kan ik de linken wel slepen. het ligt dus aan mijn iframe
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan