fixing mousedown/mouseover = drag and drop with "forbidden" pointer?

So I'm making a simple javascript graphical editor, using a table as a canvas.
It's been working pretty well to catch mousedown and mouseover on the TDs,
and then a handler for the whole document for mouseup (since I don't care where in the table the mouse is released)

The problem is sometimes, semi-repeatably but still not clear what *exactly* triggers it, the pointer turns into the "forbidden" (circle with slash) indicator, as if the mousedrag started some drag and drop operation.

Is there some easy fix for this? It's not a showstopper but it's very annoying. Here is the simplest code I can give to reproduce it in a meaningful way:

<html><head>
<style type="text/css" media="screen">
td.edbox{
  width: 10px;
  height: 10px;
  background-color:#CCCCFF
}
</style>
<script>
var mouseIsDown;
/*handler for whole page -- mouse is up, we don't care where!*/
document.onmouseup=function(eEvent) {
      mouseIsDown = false;
}

function edboxMouseDown(thing){
      mouseIsDown = true;
      edboxMouseOver(thing);
}
function edboxMouseOver(thing){
      if(mouseIsDown) {
                  thing.style.background = "#FFCCCC";
      }
}
</script>
</head>
<body>
<table border=0 cellpadding=0 cellspacing=0>
<script>
for(var v = 0; v < 20; v++) {
      document.write('<tr>');
      for(var h = 0; h < 20; h++) {
            document.write('<td class="edbox" '+
            'onMouseOver="edboxMouseOver(this)" '+
            'onMouseDown="edboxMouseDown(this);" '+
            '></td>');
      }
      document.write('</tr>');

}
</script></table></body></html>
kisraelAsked:
Who is Participating?
 
NETTY4Commented:
How about this:


<html><head>
<style type="text/css" media="screen">
td.edbox{
  width: 20px;
  height: 20px;
  background-color:#CCFFFF
}
</style>
<script>
var mouseIsDown;
var penColor = "#FFFFCC";
/*handler for whole page -- mouse is up, we don't care where!*/
document.onmouseup=function(eEvent) {
     mouseIsDown = false;
}

function edboxMouseDown(thing){
     mouseIsDown = true;
     edboxMouseOver(thing);
     return false;
}
function edboxMouseOver(thing){
     if(mouseIsDown) {
               thing.style.background = penColor;
     }
}
function changePen(){
   if(penColor != "#FFFFCC"){
     penColor = "#FFFFCC";
   } else {
     penColor = "#CCFFFF";
   }
}
</script>
</head>
<body onMouseDown="mouseIsDown = true;return false" onDblClick="changePen()">
<table border=0 cellpadding=0 cellspacing=0>
<script>
for(var v = 0; v < 10; v++) {
     document.write('<tr>');
     for(var h = 0; h < 10; h++) {
          document.write('<td class="edbox" '+
          'onMouseOver="edboxMouseOver(this)" '+
          'onMouseDown="return edboxMouseDown(this);" '+
          '></td>');
     }
     document.write('</tr>');

}
</script></table></body></html>


0
 
kisraelAuthor Commented:
Hmm, I should have googled harder...

it looks like possibly returning false in the onMouseDown clears the drag in firefox, and returning false to onDragStart is the key in IE, is that correct?
0
 
NETTY4Commented:
Check this:

<body onDragStart="return false" onSelect="return fasle">
0
 
NETTY4Commented:
Here even less handlers:


<html><head>
<style type="text/css" media="screen">
td.edbox{
  width: 20px;
  height: 20px;
  background-color:#CCFFFF
}
</style>
<script>
var mouseIsDown;
var penColor = "#FFFFCC";

function edboxMouseOver(thing){
     if(mouseIsDown) {
               thing.style.background = penColor;
     }
}

function changePen(){
   if(penColor != "#FFFFCC"){
     penColor = "#FFFFCC";
   } else {
     penColor = "#CCFFFF";
   }
}
</script>
</head>
<body onMouseDown="mouseIsDown=true;return false" onMouseUp="mouseIsDown=false" onDblClick="changePen()">
<table border=0 cellpadding=0 cellspacing=0 style="cursor: pointer; cursor: hand;">
<script>
for(var v = 0; v < 10; v++) {
     document.write('<tr>');
     for(var h = 0; h < 10; h++) {
          document.write('<td class="edbox" '+
          'onMouseOver="edboxMouseOver(this)" '+
          '></td>');
     }
     document.write('</tr>');
}
</script></table></body></html>


0
 
kisraelAuthor Commented:
That's pretty clever, though almost a little too clever, because I want to do a lot more on the page...(I purposefully made a stripped down example, and don't want to capture mouse events for the whole page) I think I'll stick with the solution I have.

I'm willing to give you the points, but I'll grade you better if you can answer me this: I *think* it should be pretty simple...if I have page elements like tables and what not that I let the page decide where they go, i.e. not specifying their exact position, just letting it be 'static', but then I want to move a table about where they are now,(i.e. like a popup panel that was previously hidden) is there any way to read their position, so I can use it as the top and left of a new table positioned absolutely? Top and left seem to come up blank, and if I dynamically change its position to "absolute", nothing works anyway...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.