473,381 Members | 1,463 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,381 software developers and data experts.

drag & drop + appendChild + Mozilla = problem

If you don't want to read this post because of its length, I
understand. I've spent two and a half days on this problem and have a
good deal of information to relate. And this is kind of a long shot,
but I'm just hoping someone here has experienced a similar problem and
has a better idea of what's going on than I do.

First, I've tested this in IE 6.0, Netscape 7.2, Mozilla 1.75, and
Firefox 1.0. It works fine in IE (even though I was coding it in
Mozilla) but breaks in all the Mozilla based browsers. I'm using
youngpup's dom-drag script:
<http://www.youngpup.net/2001/domdrag>

(In fact, I've tried it with his original script, with a stripped down
version of it, and with my own version based on his concept.) This is
what I'm trying to accomplish:
1) Have some (two for now) "containers" on a page
2) Be able to drag the containers' children between containers
3) Actually change ownership of the children between containers in the
DOM (e.g. using appendChild)

My containers are div elements. The children are p elements. I've
eliminated all position detection from my code to simplify it. I have
one p element in container one. When it is dragged, no matter where it
is dropped, it is moved to container two by calling appendChild. The
dragging part works fine. When appendChild is called, the p element is
removed from container one and placed in container two, as expected.
However, immediately after the p element is placed in container two:
1) I cannot drag anything that should be draggable except for any
draggables in container one. This includes draggables in container two
and elsewhere in the page. After clicking the mouse anywhere in the
page, everything is again draggable that should be.
2) Almost any element in the page that has a cursor CSS property (such
as "cursor: pointer") does not display it properly. When you mouse over
one of these elements, the cursor remains as it is. Further, if you
move the cursor over some text, it does not change to the text
selection cursor. The only place that the cursor works is within
container one (where the element was dragged from).
3) The browser seems to think that one is on top of anything else. If
two is placed partially on top of one, then after the appendChild call,
even though two's "cursor" property doesn't work, one's "cursor"
property will work even if you place the mouse over some part of one
that is behind two. Also, if there is another draggable in one, you can
pick it up "through" container two. By this I mean that you can click
on two where one's draggable is behind it and begin dragging it.

One final point: the p element being dragged has text in it. If you
click and drag in the text somewhere, these problems do not occur. They
only happen when you drag the element by some of the blank space
surrounding the text.

Here is the shortest code sample I can come up with that demonstrates
the problem (I'm sorry I don't have access to any server that I could
post a URL for, and I'm afraid the indentation will be screwed up since
I'm posting this with Google):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1252">
<title>Dragging</title>
<script type="text/javascript">
var Drag = {

obj : null,

init : function(o) {
o.onmousedown = Drag.start;
o.onDragEnd = new Function();
},

start : function(e) {
e = Drag.fixE(e);
var o = Drag.obj = this;
o.lastMouseX = e.clientX;
o.lastMouseY = e.clientY;
document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;
return false;
},

drag : function(e) {
e = Drag.fixE(e);
var o = Drag.obj;
var newX = parseInt(o.style.left) + e.clientX
- o.lastMouseX;
var newY = parseInt(o.style.top) + e.clientY
- o.lastMouseY;
Drag.obj.style.left = newX + "px";
Drag.obj.style.top = newY + "px";
Drag.obj.lastMouseX = e.clientX;
Drag.obj.lastMouseY = e.clientY;
return false;
},

end : function(e) {
e = Drag.fixE(e);
document.onmousemove = null;
document.onmouseup = null;
Drag.obj.onDragEnd(e.clientX, e.clientY);
Drag.obj = null;
},

fixE : function(e) {
if (typeof e == 'undefined') e = window.event;
return e;
}
};
</script>
<style type="text/css">
div.container { background-color: #bbb; position: absolute;
width: 100px; height: 200px; top: 50px; }
div.container h1 { cursor: move; }
div.container p.field { background-color: #eee;
border: 1px solid black; padding: 0 0.5ex;
position: relative; }
div#one { left: 50px; }
div#two { left: 250px; }
</style>
</head>
<body>
<div class="container" id="one">
<h1>
One
</h1>
<p class="field" id="harry" style="left: 0; top:
0;">Harry</p>
</div>
<div class="container" id="two">
<h1>
Two
</h1>
</div>
<div id="test" style="cursor: pointer; position: relative; top:
0; left: 0;">
test
</div>
<script type="text/javascript">
var two = document.getElementById("two");
var test = document.getElementById("test");
Drag.init(test);
var harry = document.getElementById("harry");
Drag.init(harry);
harry.onDragEnd = function(x, y) {
two.appendChild(harry);
harry.style.top = "0";
harry.style.left = "0";
}
</script>
</body>
</html>

Jul 23 '05 #1
1 4922
Here is a temporary URL:
http://24.171.2.56:8080/examples/dragDrop.jsp

And here is the properly formatted code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1252">
<title>Dragging</title>
<script type="text/javascript">
var Drag = {

obj : null,

init : function(o) {
o.onmousedown = Drag.start;
o.onDragEnd = new Function();
},

start : function(e) {
e = Drag.fixE(e);
var o = Drag.obj = this;
o.lastMouseX = e.clientX;
o.lastMouseY = e.clientY;
document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;
return false;
},

drag : function(e) {
e = Drag.fixE(e);
var o = Drag.obj;
var newX = parseInt(o.style.left) + e.clientX
- o.lastMouseX;
var newY = parseInt(o.style.top) + e.clientY
- o.lastMouseY;
Drag.obj.style.left = newX + "px";
Drag.obj.style.top = newY + "px";
Drag.obj.lastMouseX = e.clientX;
Drag.obj.lastMouseY = e.clientY;
return false;
},

end : function(e) {
e = Drag.fixE(e);
document.onmousemove = null;
document.onmouseup = null;
Drag.obj.onDragEnd(e.clientX, e.clientY);
Drag.obj = null;
},

fixE : function(e) {
if (typeof e == 'undefined') e = window.event;
return e;
}
};
</script>
<style type="text/css">
div.container { background-color: #bbb; position: absolute;
width: 100px; height: 200px; top: 50px; }
div.container h1 { cursor: move; }
div.container p.field { background-color: #eee;
border: 1px solid black; padding: 0 0.5ex;
position: relative; }
div#one { left: 50px; }
div#two { left: 250px; }
</style>
</head>
<body>
<div class="container" id="one">
<h1>
One
</h1>
<p class="field" id="harry" style="left: 0; top: 0;">Harry</p>
</div>
<div class="container" id="two">
<h1>
Two
</h1>
</div>
<div id="test" style="cursor: pointer; position: relative; top: 0; left:
0;">
test
</div>
<script type="text/javascript">
var two = document.getElementById("two");
var test = document.getElementById("test");
Drag.init(test);
var harry = document.getElementById("harry");
Drag.init(harry);
harry.onDragEnd = function(x, y) {
two.appendChild(harry);
harry.style.top = "0";
harry.style.left = "0";
}
</script>
</body>
</html>
Jul 23 '05 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

9
by: Wang, Jay | last post by:
Hello, all, I would like to enable some text between <SPAN url="http://www.testserver.com/">WORD TO BE DRAGGED </SPAN>. I put some javascript and it will extract http://www.testserver.com/ from...
5
by: chris | last post by:
I have a bit of JavaScript code (see below) that handles drag-and-drop of elements on a webpage, simply moving them around the page. The problem I'm having occurs when the user drags the object...
6
by: jojobar | last post by:
Hello, I look at the asp.net 2.0 web parts tutorial on the asp.net web site. I tried to run it under firefox browser but it did not run. If I want to use this feature in a commercial product...
2
by: misower | last post by:
var c = document.getElementById("PanelTree"); // PanelTree is a <div> element! var n = document.createElement("div"); n.setAttribute('id', 'nu'); n.setAttribute('style',...
1
by: Riyaz | last post by:
Hi mates, Im developing an purely client side drag & drop application with JavaScript. I got a code for IE 4.0 and Netscape 4.0... while trying to update code to work in modern browsers like IE...
17
by: Romulo NF | last post by:
Ive seen some people around the web wondering about a code to reorder table columns using the mouse (drag and drop). Since i had already made one script to reorder table lines (TRs) i decided to...
0
by: Romulo NF | last post by:
Ive recently posted a script to move columns from a table using drag and drop javascript. Recently ive received a message of a user of this communty showing interest in the script to move lines...
2
by: sebastian.janoschka | last post by:
Hi, I build my first Drag & Drop with JavaScript and I would like to drag the pictures when I click on it. When I create a normal div tag with some text the script works, but when I put a...
5
by: Romulo NF | last post by:
Greetings, Im back here to show the new version of the drag & drop table columns (original script ). Ive found some issues with the old script, specially when trying to use 2 tables with...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.