[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2005-05-10
5
Medium Priority
?
1,000 Views
Last Modified: 2012-06-27
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>
0
Comment
Question by:kisrael
  • 3
  • 2
5 Comments
 

Author Comment

by:kisrael
ID: 13972283
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
 
LVL 8

Expert Comment

by:NETTY4
ID: 13972286
Check this:

<body onDragStart="return false" onSelect="return fasle">
0
 
LVL 8

Accepted Solution

by:
NETTY4 earned 700 total points
ID: 13972522
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
 
LVL 8

Expert Comment

by:NETTY4
ID: 13972605
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
 

Author Comment

by:kisrael
ID: 13978543
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

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question