Ergebnis 1 bis 5 von 5
  1. #1
    Poehli ist offline Doppel-As
    registriert
    18-04-2009
    Beiträge
    111

    Question dragevent.clientX funktioniert nicht in FF

    Hi,
    ich versuche grad ein HTML5 Drag and Drop zu implementieren. Doch wie zu erwarten funktioniert es nicht überall so wie es soll
    Mein simpler Code funktioniert bei alles Browsern, die HTML5 unterstützen, abgesehen von Firefox. Es liegt daran, dass clientX kein Attribut vom dragevent ist. ScreenX liefert ja immer komische Werte aus, demnach würde ich das ungerne verwenden.
    Gibt es eine bessere Möglichkeit, die Mouseposition herauszufinden?

    Hier der Code:
    Code:
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    	<title>Test</title>
    
    <script src="scripts/modernizr.custom.24725.js" type="text/javascript"></script>
    
    </head>
    
    <body>
    
    <window id ="test" draggable="true" style="position:absolute; top:0px; left:0px;width:100px;height:100px;background-color:green; cursor:pointer;">test</window> 
    <div id="desktop" style="width:100%; height:100%;"></div>
    <span id="text" style="position:absolute; left:300px; top: 10px;"></span>
    <script type="text/javascript">
    function drag_start(event) {
    	//alert("dragstart");
    	document.getElementById("text").innerHTML = "dragstart";
        var style = window.getComputedStyle(event.target, null);
        event.dataTransfer.setData("text/plain",
        (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
        return false;
    }
    function drag_over(event) {
    	//alert("dragover");
    	document.getElementById("text").innerHTML = "dragover";
        event.preventDefault();
        return false;
    }
    function drop(event) {
    	//alert(event.dataTransfer);
    	document.getElementById("text").innerHTML = "drop";
        var offset = event.dataTransfer.getData("text/plain").split(',');
        var dm = document.getElementById(event.target.id);
        dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
        dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
        event.preventDefault();
        return false;
    }
    
    function drag_end( event ){
    	//alert("dragend");
    	if (!event)
    		event = window.event;
    	if (event.clientX){
    		event.target.style.left = event.clientX;
    		event.target.style.top = event.clientY;
    	}else if(event.screenX){
    		event.target.style.left = event.pageX+"px";
    		event.target.style.top = event.pageY+"px";
    
    		document.getElementById("text").innerHTML = "x: "+event.screenX+"px"+" - y: "+event.screenY+"px";
    	} else
    		alert("geht nicht");
    	//document.getElementById("text").innerHTML = "dragend";
    	
    	return false;
    }
    
    if (Modernizr.draganddrop){
    var dm = document.getElementById('test');
    var doc = document.getElementById('desktop');
    dm.addEventListener('dragstart',drag_start,false);
    dm.addEventListener('dragend',drag_end,false);
    doc.addEventListener('dragover',drag_over,false);
    doc.addEventListener('drop',drop,false); 
    }else
    	alert("drag and drop nicht von diesem Browser unterstützt");
    
    </script>
    
    </body>
    </html>
    Ich habe meine Tests mal nicht rausgenommen, vllt helfen die euch ja auch

  2. #2
    teldri ist offline Eroberer
    registriert
    31-01-2008
    Beiträge
    69

    AW: dragevent.clientX funktioniert nicht in FF

    Bei deiner Funktion "drop" wird top und left vom Div "desktop" gesetzt. Ich denke das ist nicht Sinn der Sache oder?
    Das ermitteln der Werte an sich funktioniert bei mir (Firefox 17) problemlos!

  3. #3
    Poehli ist offline Doppel-As
    registriert
    18-04-2009
    Beiträge
    111

    AW: dragevent.clientX funktioniert nicht in FF

    Ich mache grad ein Update von FF, aber bisher (v. 16) hat es bei mir noch nicht geklappt. Und natürlich ist es nicht der Sinn der Sache, spielt aber ne untergeordnete Rolle, da er in meiner drag_end Funktion die event.clientX Abfrage umgeht.
    Ich werde es natürlich trotzdem gleich mal umändern :P
    Wenn den SPAN, zeigt er mir die koordinaten von screenX und screenY an. Und es ist auch ausschließlich beim dragevent nicht beim Mouseevent. Aber danke schonmal, ich werds gleich nochmal mit dem neustem FF testen (würde mir erstmal reichen).

  4. #4
    Poehli ist offline Doppel-As
    registriert
    18-04-2009
    Beiträge
    111

    AW: dragevent.clientX funktioniert nicht in FF

    hier der überarbeitete Code mit Fehlerhervorhebung:
    Code:
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    	<title>Test</title>
    
    <script src="scripts/modernizr.custom.24725.js" type="text/javascript"></script>
    
    </head>
    
    <body>
    
    <window id ="test" draggable="true" style="position:absolute; top:0px; left:0px;width:100px;height:100px;background-color:green; cursor:pointer;">test</window> 
    <div id="desktop" style="width:100%; height:100%;"></div>
    <span id="text" style="position:absolute; left:300px; top: 10px;"></span>
    <script type="text/javascript">
    function drag_start(event) {
    	//alert("dragstart");
    	document.getElementById("text").innerHTML = "dragstart";
        var style = window.getComputedStyle(event.target, null);
        event.dataTransfer.setData("text/plain",
        (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
        return false;
    }
    function drag_over(event) {
    	//alert("dragover");
    	document.getElementById("text").innerHTML = "dragover";
        event.preventDefault();
        return false;
    }
    function drop(event) {
    	//alert(event.dataTransfer);
    	document.getElementById("text").innerHTML = "drop";
        event.preventDefault();
        return false;
    }
    
    function drag_end( event ){
    	//alert("dragend");
    	document.getElementById("text").innerHTML = "x: "+event.clientX+"px"+" - y: "+event.clientY+"px";
            //Hier gibt er mir auf dem Bildschirm (weil alerts irgendwann nerven) "x: 0px - y: 0px" aus. 
    	if (!event)
    		event = window.event;
    	if (event.clientX){ //Hier schlägt die Überprüfung fehl und geht in die else if Anweisung 
    		event.target.style.left = event.clientX;
    		event.target.style.top = event.clientY;
    	}else if(event.screenX){
    		event.target.style.left = event.pageX+"px";
    		event.target.style.top = event.pageY+"px";
    
    		//document.getElementById("text").innerHTML = "x: "+event.screenX+"px"+" - y: "+event.screenY+"px";
    	} else
    		alert("geht nicht");
    	//document.getElementById("text").innerHTML = "dragend";
    	
    	return false;
    }
    
    if (Modernizr.draganddrop){
    var dm = document.getElementById('test');
    var doc = document.getElementById('desktop');
    dm.addEventListener('dragstart',drag_start,false);
    dm.addEventListener('dragend',drag_end,false);
    doc.addEventListener('dragover',drag_over,false);
    doc.addEventListener('drop',drop,false); 
    }else
    	alert("drag and drop nicht von diesem Browser unterstützt");
    
    </script>
    
    </body>
    </html>

  5. #5
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    AW: dragevent.clientX funktioniert nicht in FF

    Ich würde da mal einen Bugreport an Mozilla schicken.

    Als Workaround könntest du mit einem onmousemove die Position imm auslesen, irgendwo speichern und dann beim dragend verwenden.

Ähnliche Themen

  1. Antworten: 10
    Letzter Beitrag: 14-03-2012, 08:42
  2. JS funktioniert im IE7 nicht
    Von hausmaster im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 15-10-2010, 00:15
  3. Antworten: 6
    Letzter Beitrag: 22-10-2009, 11:39
  4. screenX, pageX, clientX
    Von Benny 800 im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 04-06-2007, 08:15
  5. clientx bzw. clientY Problem
    Von GreatOne im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 18-04-2006, 08:31

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •