nicht angemeldet
Drag&Drop ("Windows-Simulation")
Hallo Forum!
Mein Ziel ist es, die von windows bekannte Funktion zu simulieren, eine Datei per Drag&Drop in einen Ordner zu verschieben (in Zusammenarbeit mit ASP). Eigentlich bin ich schon recht weit; was mir allerdings noch fehlt, ist die Funktion zum optischen Verschieben eines Layers.
Mein Code:
<html>
<head>
<script language="Javascript">
<!--
bValid = false;
file = '';
function drag(prmFile,prmDiv)
{
file = prmFile;
div = prmDiv;
}
function drop(prmFolder)
{
if (prmFolder == '')
{
if (bValid != true)
{
file = '';
}
else
{
if (file != '')
{
alert("redirect " + file + " - " + folder);
}
else
{
file = '';
bValid = false;
}
}
}
else
{
folder = prmFolder;
bValid = true;
}
}
-->
</script>
</head>
<body onmouseup="drop('');">
<div id="target" onmouseup="drop('pfad/zum/ordner');">
ordner
</div>
<br>
<br>
<div id="from" style="width=100px;position:relative;background:yellow;" onmousedown="drag('bild.jpg','from');">
bild.jpg
</div>
</body>
</html>
Die alert-Ausgabe wird dann später durch eine Weiterleitung zu einem ASP-Skript ersetzt, das das Verschieben dann per FileSystemObject (ASP) vornimmt.
Also, was mir fehlt ist nun, dass der Layer "from" "der Maus folgt", wenn man darauf klickt und dann die Maus verschiebt. Hat mir jemand einen Ansatz, wie das gehen könnte?
Gruss,
Daniel
PS: Muss nur unter Internet Explorer 6 funktionieren. "position:relative" beim Layer ist eine Bedingung, die nicht geändert werden darf (brauche das nachher in einem anderen Skript, wo ich position:relative unbedingt brauche!
-
Hallo!
Eigentlich bin ich schon recht weit; was mir allerdings noch fehlt, ist die Funktion zum optischen Verschieben eines Layers.
also ich hab mit der self-suche und dem begriff "verschieben" passende suchergebnisse zu deiner frage gefunden.
grüsse, raik
-
Danke für den Tipp!
Ich bin inzwischen auch selber ziemlich weitergekommen. Das vorläufige Resultat ist unter http://www.ccc-sg.ch/cgi-bin/cms/pic-folder2.asp zu "bestaunen". (Man klicke mit der Maus auf eine Datei, ziehe sie in einen anderen Ordner und lasse die Maus los; das JS-alert ist nur vorläufiger Natur!)
Das Problem, das ich nun noch habe, ist folgendes: beim Ziehen der Datei wird anderer Inhalt der Seite markiert (blau hinterlegt) (zumindest im IE6.0, wo es funktionieren muss!), was natürlich nicht schön ist... gibt es irgendeine (einfache) Möglichkeit, diesen Effekt zu vermeiden?
Wäre äusserst froh, wenn das irgendwie gehen würde!
Gruss & danke
Daniel
-
-
Hallo Daniel,
Mein Code:
[...]
Das ist doch gar nicht der Code:
<script language="JavaScript">
<!--
var dragobjekt = null;
var dragx = 0;
var dragy = 0;
var posx = 0;
var posy = 0;
var file = '';
var target = '';function draginit()
{
document.onmousemove = drag;
document.onmouseup = dragstop;
}function dragstart(element) {
q = window.event.offsetX;
r = window.event.offsetY;
dragobjekt = element;
startX = 0;
startY = 0;
startX = element.offsetLeft;
startY = element.offsetTop;
while (element)
{
dragx = posx - dragobjekt.offsetLeft;
dragy = posy - dragobjekt.offsetTop;
element = element.offsetParent;
}
addx = dragx - dragobjekt.offsetLeft - q;
addy = dragy - dragobjekt.offsetTop - r;
}function dragstop()
{
var bRedirect = false;
var iTotal = document.getElementsByTagName("div").length-1;
for (var iX = 0; iX <= iTotal; iX++)
{
sInnerHtml = document.getElementsByTagName("div")[iX].innerHTML;
aTitle = document.getElementsByTagName("div")[iX].title.split("from");
sTitle = aTitle[2];
var iPosition = sInnerHtml.indexOf("Folder");
if (iPosition != (-1))
{
mouseX = window.event.clientX;
mouseY = window.event.clientY;
var aInnerHtml = sInnerHtml.split(">");
var folderXleft = '';
var folderYtop = '';
element = document.getElementsByTagName("div")[iX];
element2 = element;
var folderWidth = element.offsetWidth;
var folderHeight = element.offsetHeight;
while (element)
{
folderXleft -= element.offsetLeft;
folderYtop -= element.offsetTop;
element = element.offsetParent;
}
folderXleft = -folderXleft;
folderYtop = -folderYtop;
folderXright = folderXleft + folderWidth;
folderYbottom = folderYtop + folderHeight;
if (mouseX > folderXleft && mouseX < folderXright && mouseY > folderYtop && mouseY < folderYbottom)
{
if (dragobjekt != null)
{
alert("redirect... file: " + file + " / target: " + sTitle);
bRedirect = true;
}
}
}
}
file = '';
dragobjekt=null;
}function drag(ereignis) {
posx = window.event.clientX;
posy = window.event.clientY;
if(dragobjekt != null)
{
dragobjekt.style.left = (posx - dragx + addx) + "px";
dragobjekt.style.top = (posy - dragy + addy) + "px";}
}-->
</script>
</head><body onLoad="javascript:draginit();" id="body" oncontextmenu="return false;">
Insbesondere der letzte Eintrag im Body ist höchst interessant.
Diese Demonstration soll dir einfach zeigen, wie sinnlos jeder Versuch ist, die rechte Maustatse zu sperren, da er nie das gewünschte Ergebnis zeigt und überdies nicht wenige verärgert.
Im Übrigen funktioniert dein Script in den Geckos und Opera überhaupt nicht.Gruß
Kurt
--
"Verstand und Genie rufen Achtung und Hochschaetzung hervor, Witz und Humor erweckt Liebe und Zuneigung." (David Hume; schott. Philosoph; 1711-1776)
http://elektro-dunzinger.at
http://shop.elektro-dunzinger.at-
Diese Demonstration soll dir einfach zeigen, wie sinnlos jeder Versuch ist, die rechte Maustatse zu sperren, da er nie das gewünschte Ergebnis zeigt und überdies nicht wenige verärgert.
Ich weiss schon, dass das so ist, brauche es aber in meiner Anwendung dennoch so (ich will mit rechter Maustaste mein eigenes "Kontextmenu" öffnen, und da stört mich jenes vom Browser)! Ist auch nur für ein CMS, ich verärgere also niemanden damit!
Im Übrigen funktioniert dein Script in den Geckos und Opera überhaupt nicht.
Drum schreibe ich in meinem Ausgangsposting auch: "Muss nur unter Internet Explorer 6 funktionieren"
Gruß
Kurt
Gruss,
Daniel
-