Client Side Things
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Try It Free
Go Back   Codewalkers Forums > Other Technologies > Client Side Things
Reload this Page

buggy click and drag

Discuss buggy click and drag in the Client Side Things forum on Codewalkers.
buggy click and drag Here is a place to talk and ask questions about HTML, CSS, Javascript, and other client side technologies.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Page 1 of 2 1 2 >
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Codewalkers Forums Sponsor:
Be the architects of evolution and help create the mobile internet future. It’s your move---enter to win here!
  #1  
Old May 31st, 2003, 01:42 AM
madhombre madhombre is offline
Codewalkers Newbie (0 - 499 posts)
  
Join Date: Apr 2007
Location: WI
Posts: 247 madhombre User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 2
buggy click and drag
well it has been a while, I have been focusing on my Java so haven't been here for a little bit.

Anyways, I am pushing the limits again :-)

check out this page

http://www.hysteriaweb.net/index.php?page=999&width=1004&height=591

try to move the item around, it works but only most of the time.

when I put an alert up when the mouse down is activated it showed that it does not even register the event. so it is not the code

is it just a limitation of the browser
or is it just my computer?

thanks
Reply With Quote
  #2  
Old May 31st, 2003, 12:56 PM
crisp crisp is offline
Codewalkers Newbie (0 - 499 posts)
  
Join Date: Apr 2007
Location: Holland
Posts: 336 crisp User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 2
RE: buggy click and drag
Looks to me like you just downloaded some DHTML lib and are expecting us to dig through all of it; that will probably cost me hours because it's so bloated...
I'll give you a very simple example on how to move an element around (which also works in NS6+ and Mozilla):

php Code:
Original - php Code 
  1.  
  2. <html>
  3. <head>
  4. <title>move a div</title>
  5. <style type="text/css">
  6. .movable {
  7.   position: absolute;
  8.   left: 10px;
  9.   top: 10px;
  10.   background-color: #0000ff;
  11.   color: #ffffff;
  12.   font-family: arial, serif;
  13.   font-weight: bold;
  14.   font-size: 14px;
  15.   border: 1px solid #000000;
  16.   width: 100px;
  17.   height: 100px;
  18.   -moz-box-sizing: border-box;
  19.   box-sizing: border-box;
  20.   padding: 5px;
  21. }
  22. </style>
  23. <script type="text/javascript">
  24.  
  25. function init() {
  26.  
  27.   document.getElementById('move1').onselectstart = function() { return false; }
  28.   document.getElementById('move1').onmousedown = function(e) { GetDiv(e); }
  29.  
  30. }
  31.  
  32. var SelectedDiv = null;
  33. var X, Y;
  34. function GetDiv(e) {
  35.  
  36.   if (SelectedDiv) {
  37.  
  38.     DropDiv();
  39.  
  40.   } else {
  41.  
  42.     if (!e) e = event;
  43.  
  44.     X = e.offsetX? e.offsetX:e.layerX;
  45.     Y = e.offsetY? e.offsetY:e.layerY;
  46.     SelectedDiv = e.srcElement? e.srcElement:e.target;
  47.     SelectedDiv.style.cursor = 'move';
  48.  
  49.   }
  50.  
  51. }
  52.  
  53. function MoveDiv(e) {
  54.  
  55.   if (!e) e = event;
  56.  
  57.   if (SelectedDiv) {
  58.  
  59.     SelectedDiv.style.left = (e.clientX-X)+'px';
  60.     SelectedDiv.style.top = (e.clientY-Y)+'px';
  61.  
  62.   }
  63.  
  64. }
  65.  
  66. function DropDiv() {
  67.  
  68.   if (SelectedDiv) {
  69.  
  70.     SelectedDiv.style.cursor = 'default';
  71.     SelectedDiv = null;
  72.  
  73.   }
  74.  
  75. }
  76.  
  77. document.onmousemove = MoveDiv;
  78. document.onmouseup = DropDiv;
  79.  
  80. </script>
  81. </head>
  82. <body onload="init()">
  83. <div class="movable" id="move1">Move this</div>
  84. </body>
  85. </html>


(put it in PHP tags for readability)
Reply With Quote
  #3  
Old May 31st, 2003, 07:12 PM
madhombre madhombre is offline
Codewalkers Newbie (0 - 499 posts)
  
Join Date: Apr 2007
Location: WI
Posts: 247 madhombre User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 2
RE: buggy click and drag
thanks a bunch, actaully wrote most of that from scratch!!! :-)

I will give your solution a whirl.

Thanks
Reply With Quote
  #4  
Old June 1st, 2003, 07:52 PM
madhombre madhombre is offline
Codewalkers Newbie (0 - 499 posts)
  
Join Date: Apr 2007
Location: WI
Posts: 247 madhombre User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 2
RE: buggy click and drag
the reason it looked bloated is because I combined the move with the resize op too. then I kinda left a chunk of the resize stuff in there because I was unsure if I would use it or not.

I will strip that out, clean up the code and take it from there.

the think I do not like too much on your example, which is very cool. is that you have a lot of extra stuff like an init and the fact you need to set up the items that are to move in there. I am adding this to a builder and I wanted to try to avoid adding more stuff in that needed to be set. This maybe why I am having issues, I may need to do that the use of onselectstart is interesting. never thought to do it like that.

let me take another look and get back to you.

thanks again for the help
Reply With Quote
  #5  
Old June 1st, 2003, 08:04 PM
madhombre madhombre is offline
Codewalkers Newbie (0 - 499 posts)
  
Join Date: Apr 2007
Location: WI
Posts: 247 madhombre User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 2
RE: buggy click and drag
down to this and it still does it. I that it normally always skips the first one and I don't know why, any ideas?

var ob = null;
var over = false;
var X = 0; var Y = 0;

function MD(e)
{
if (over)
{
ob = event.srcElement.parentElement;
X=event.offsetX;
Y=event.offsetY;
}
}

function MM(e)
{
if (ob)
{
ob.style.pixelLeft = event.x - X - document.body.scrollLeft;
ob.style.pixelTop = event.y - Y - document.body.scrollTop;
}

return false;
}

function MU(e) { ob = null; }

document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
Reply With Quote
  #6  
Old June 1st, 2003, 08:05 PM
madhombre madhombre is offline
Codewalkers Newbie (0 - 499 posts)
  
Join Date: Apr 2007
Location: WI
Posts: 247 madhombre User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 2
RE: buggy click and drag
ps I use the parent object because I am moving images inside a div.
Reply With Quote
  #7  
Old June 1st, 2003, 08:08 PM
madhombre madhombre is offline
Codewalkers Newbie (0 - 499 posts)
  
Join Date: Apr 2007
Location: WI
Posts: 247 madhombre User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 2
RE: buggy click and drag
more news, it seems like seeting the over to true is not registering, which means it may because just a little slow some times.

your way to trigger the move is a lot better but like I said I wish to avoid an init if possible, I will work on this
Reply With Quote
  #8  
Old June 1st, 2003, 08:52 PM
madhombre madhombre is offline
Codewalkers Newbie (0 - 499 posts)
  
Join Date: Apr 2007
Location: WI
Posts: 247 madhombre User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 2
RE: buggy click and drag
think I am going to try moving the mouse event triggers to the object.

looks like your select just kinda ignores so you have the event trigger on the object, which I could simply include into the reg code.
Reply With Quote
  #9  
Old June 1st, 2003, 08:54 PM
crisp crisp is offline
Codewalkers Newbie (0 - 499 posts)
  
Join Date: Apr 2007
Location: Holland
Posts: 336 crisp User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 2
RE: buggy click and drag
I have seen more strange behaviour when using event-triggers in an area-map. Thereby the area with the code to set the over variable is quite small; maybe it's a combination of these two problems.
Reply With Quote
  #10  
Old June 1st, 2003, 10:16 PM
madhombre madhombre is offline
Codewalkers Newbie (0 - 499 posts)
  
Join Date: Apr 2007
Location: WI
Posts: 247 madhombre User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 2
RE: buggy click and drag
having issues calling the mousedown from the event trigger being on the div (I have also tried many combinatiopns on the img itself. mo luck

http://www.hysteriaweb.net/stuff/temp/moving.html

how do I put the call for the mousedown trigger on the div?

I have tried
onMouseDown=MD;
onMouseDown="MD(e);"
onMouseDown="function(e) { MD(e); }"

nothing seems to work, the MD does not get called, in the second example I get an error saying e does not exist.

what am I missing here?

thanks
Reply With Quote
  #11  
Old June 1st, 2003, 10:30 PM
crisp crisp is offline
Codewalkers Newbie (0 - 499 posts)
  
Join Date: Apr 2007
Location: Holland
Posts: 336 crisp User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 2
RE: buggy click and drag
The document.onmousedown=MD; is correct
I found that the following:

ob = event.srcElement.parentElement

is actually referring to the <MAP> instead of the <DIV>. When I changed it to:

ob = event.srcElement.parentElement.parentElement;

I was able to drag the picture around when clicking it in the upperleft corner
Reply With Quote
  #12  
Old June 1st, 2003, 11:36 PM
madhombre madhombre is offline
Codewalkers Newbie (0 - 499 posts)
  
Join Date: Apr 2007
Location: WI
Posts: 247 madhombre User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 2
RE: buggy click and drag
ok, when I don't have the extra parent bit in there it works MOST of the time, when I do it flatly does not work.

I think that the is the timing of the setting of the over event flagger, the event gets captured but the over flag is not set at that time.

it works MOST of the time but it never works right off the bat and then from time to time it throws a fit and refuses to do it. that is why I wanted to get rid of the document.onmousedown = MD and replace it with one on the actual div, can this be inline or not?

what is the syntax to put it inline?

thanks
Reply With Quote
  #13  
Old June 1st, 2003, 11:52 PM
madhombre madhombre is offline
Codewalkers Newbie (0 - 499 posts)
  
Join Date: Apr 2007
Location: WI
Posts: 247 madhombre User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 2
RE: buggy click and drag
http://www.hysteriaweb.net/stuff/temp/moving.html

check this out now, I have added 2 different form boxes the first shows 'yup' when the event gets triggered
then if the over is set then the second box also show yup, when the up even is triggered both get reset to nope.

from this I can see that when it does not move the over is not set BUT the event is triggered.

suggestions.

thanks
<