Drag and Drop Firefox Problem

one6666

Mitglied Titanium
Hallo,

arbeite gerade an einer drag and drop Funktion, da die von selfhtml unter dem Firefox nicht ganz geht,
aber auch ich musste feststellen das meine Version die gleichen Fehler aufweist,
schaut euch mal die selfthtml Version an (bisschen ausgeräumt):
HTML:
<html>
<head>
<title>Drag-and-Drop</title>
<script type="text/javascript">
var drag_object = null, dragx = 0, dragy = 0, posx = 0, posy = 0;

function dragstart(object) {
  drag_object = object;
  dragx = posx - drag_object.offsetLeft;
  dragy = posy - drag_object.offsetTop;
  
}
function dragstop() {
  drag_object = false;
}
function drag(parameter) {
  posx = document.all ? window.event.clientX : parameter.pageX;
  posy = document.all ? window.event.clientY : parameter.pageY;
  
  if(drag_object != false) {
    drag_object.style.left = (posx - dragx) + "px";
    drag_object.style.top = (posy - dragy) + "px";
  }
}

document.onmousemove = drag;
document.onmouseup = dragstop;

</script>
</head>
<body>
<div onmousedown="dragstart(this)" style="position:absolute; height:100px;width:100px;background:#ff0000"> </div>
</body>
</html>

Ich vermutte mal das es an den Event Händler onmouseup liegt, aber einen anderen Weg sehe ich gerade nicht,
weiß Jemand warum der Firefox nach dem zweiten mal bewegen Probleme macht ?
 
Hallo,

bei mir ist das genau so:
Ich kann das Objekt einmal verschieben lasse ich die Maus los und will es dann nochmal packen mit gedrückter Taste,
und es dann wieder verschieben, erscheint dieser Kreis mit einen Strich durch so wie als wenn du ein normales Bild oder so in einer Webseite verschieben willst,
und verschieben list es sich so live nicht mehr, lasse ich aber die Maus los springt er zu der Stelle wo ich sie losgelassen hab,
aber mache ich nix in den moment fährt das Objekt wieder weiter hin und her, so als hätte ich die Maus noch gedrückt :eek:

Jetzt noch etwas, mache ich das ganze mit der mittleren Maustaste oder der rechten so läuft alles wie gehabt :eek::eek::eek:

Habe mir Heute sogar eine neue Maus gekauft um sicher zu sein (Musste ich eh da das mittlere scrollrad nicht mehr drehte :p ),
das es nicht an der Maus liegt, aber auch mit der neuen Maus das gleiche,
auch habe ich den Firefox neu installiert und die Maus in andere USB Stellen gesteckt nix hilft.

Aber auch hier wieder was besonders :D
Wenn ich hier http://aktuell.de.selfhtml.org/artikel/javascript/draganddrop/beispiel_drag_and_drop.htm immer eins nach dem anderen hin und her schiebe,
also erst das Rote dann das Grüne Objekt so geht alles, aber mache ich das nur mit einen Objekt so tritt der Fehler wieder auf.

Aber auch hier wieder was besonders :D
Wende ich die drag and drop Funktion auf mein Objekt (9 geteilte Tabelle an) so tritt der Fehler nicht auf, hier der Code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editor-Window</title>
<style type="text/css">
/* Editor Window (e_w) Start */
#e_w{
	width:800px;
	height:300px;
}
#e_w_top_left_id{
	background:url(image/editor-window/top-left.png) no-repeat;
	width:10px;
	height:10px;
	cursor:nw-resize;
}
#e_w_top_middle_id{
	background:url(image/editor-window/top-middle.png) repeat-x;
	height:10px;
	cursor:move;
}
#e_w_top_right_id{
	background:url(image/editor-window/top-right.png) no-repeat;
	width:10px;
	height:10px;
	cursor:ne-resize;
}
#e_w_middle_left_id{
	background:url(image/editor-window/middle-left.png) repeat-y;
	width:10px;
	cursor:w-resize;
}
#e_w_middle_middle_id{
	background:url(image/editor-window/middle-middle.png);
}
#e_w_middle_right_id{
	background:url(image/editor-window/middle-right.png) repeat-y;
	width:10px;
	cursor:e-resize;
}
#e_w_bottom_left_id{
	background:url(image/editor-window/bottom-left.png) no-repeat;
	width:10px;
	height:10px;
	cursor:sw-resize;
}
#e_w_bottom_middle_id{
	background:url(image/editor-window/bottom-middle.png) repeat-x;
	height:10px;
	cursor:s-resize;
}
#e_w_bottom_right_id{
	background:url(image/editor-window/bottom-right.png) no-repeat;
	width:10px;
	height:10px;
	cursor:se-resize;
}
/* Editor Window (e_w) End */
</style>
<script type="text/javascript">
var drag_object = null, dragx = 0, dragy = 0, posx = 0, posy = 0;

function dragstart(object) {
  drag_object = document.getElementById("e_w");
  dragx = posx - drag_object.offsetLeft;
  dragy = posy - drag_object.offsetTop;
  
}
function dragstop() {
  drag_object = false;
}
function drag(parameter) {
  posx = document.all ? window.event.clientX : parameter.pageX;
  posy = document.all ? window.event.clientY : parameter.pageY;
  
  if(drag_object != false) {
    drag_object.style.left = (posx - dragx) + "px";
    drag_object.style.top = (posy - dragy) + "px";
  }
}

document.onmousemove = drag;
document.onmouseup = dragstop;
</script>
</head>

<body>
<div id="testausgabe"></div>
    <table id="e_w" style="position:absolute;" cellpadding="0" cellspacing="0">
        <tr>
            <td id="e_w_top_left_id">        </td>
            <td onmousedown="dragstart()" id="e_w_top_middle_id">      </td>
            <td id="e_w_top_right_id">       </td>
        </tr>
        <tr>
            <td id="e_w_middle_left_id">     </td>
            
                <td id="e_w_middle_middle_id">
                x
                </td>
                
            <td id="e_w_middle_right_id">    </td>
        </tr>
        <tr>
            <td id="e_w_bottom_left_id">     </td>
            <td id="e_w_bottom_middle_id">   </td>
            <td id="e_w_bottom_right_id">    </td>
        </tr>
    </table>

</body>
</html>

Muss also irgentwo dran liegen nur wodran ist jetzt die Frage, und ist eine sehr wichtige Funktion wenn die bei manchen Lauten Probleme auslöst bin ich am a****
 
Hi,

füge in die Tabellenzelle Inhalt ein - z.B. ein erzwungenes Leerzeichen:
Code:
    <table id="e_w" style="position:absolute;" border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td id="e_w_top_left_id"> </td>
            <td onmousedown="dragstart()" id="e_w_top_middle_id">&nbsp;</td>
            <td id="e_w_top_right_id"> </td>
        </tr>
        <tr>
            <td id="e_w_middle_left_id"> </td>
            <td id="e_w_middle_middle_id">x</td>
            <td id="e_w_middle_right_id"> </td>
        </tr>
        <tr>
            <td id="e_w_bottom_left_id"> </td>
            <td id="e_w_bottom_middle_id"> </td>
            <td id="e_w_bottom_right_id"> </td>
        </tr>
    </table>

Ciao
Quaese
 
Hi One6666,

so ein Problem hatte ich auch mal beim einer JS-Klasse für einen Schieberegler, ist im Prinzip ja ähnlich - es geht um Drag & Drop.
Um den Kreis mit dem Strich wegzubekommen musst du das Objekt einfach immer fokussieren, d.h. "deinObjekt.focus()", und das am besten bei jeder kleinsten Mausbewegung, d.h. bei dir in der Funktion "drag". Dadurch bleibt das Objekt immer fokussiert bzw. aktiv, und der Browser kommt nicht auf die Idee man wolle es irgendwo anders hinziehen.

Gruß Guillermo
 
Zurück