Not able to achieve the MOUSEUP event properly !!!

shafi_363

01-09-2006, 10:47 PM

Hi ALL,

According to definition of MouseUp event, i am supposed to get
the element ( if i use event.target or event.srcElement) whereever i
released my mouse. But in my case its not happening.

Here by i am attaching that html code. I tried out mousedown in
one list & the subsequent mouseup in another list.then also it
displaying the name of the first list box( where i had put my mousedown).

=============****** CODE START *******================

<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript">
document.onmouseup = function(e)
{
alert(((e = e || event).target || e.srcElement).name);
};

</script>
</HEAD>

<BODY>
<form>
<table>
<tr>
<td>
<SELECT NAME=ONE MULTIPLE>
<OPTION>ONE_Web Authoring Reference</OPTION>
<OPTION>ONE_FAQ Archives</OPTION>
<OPTION>ONE_Design Elements</OPTION>
<OPTION>ONE_Tools</OPTION>
<OPTION>ONE_Feature Article</OPTION>
</SELECT>
</td>

<td>
<SELECT NAME=TWO MULTIPLE>
<OPTION>TWO_Web Authoring Reference</OPTION>
<OPTION>TWO_FAQ Archives</OPTION>
<OPTION>TWO_Design Elements</OPTION>
<OPTION>TWO_Tools</OPTION>
<OPTION>TWO_Feature Article</OPTION>
</SELECT>
</td>
</tr>
</table>
</form>
</BODY>
</HTML>

==================******CODE END *******===================

I want to get the target element whereever i released my mouse.( For
ex : if i put mousedown in list ONE & mouseup in list TWO, then in
mouseup event handler i should get "target.name" as "TWO"... But
currently it is giving as "ONE") ..Is there any other way to achieve
what i want...IF so please let me know :)

Thanks & Regards
--Shafi

rlemon

01-10-2006, 05:04 PM

see post below

rlemon

01-10-2006, 06:28 PM

works in FF and IE.

<script type="text/javascript">
var what;
document.onmousedown = function(e){ if (!e) var e = window.event; if(document.all){ what = e.srcElement.name; } else { what = e.target.parentNode.name; } }
document.onmouseup = function(){ alert(what) };
</script>

explination:

I set the element onMouseDown then read it onMouseUp.

this will allow you to remember where you were when you selected the MouseDown.

Furthermore, I have added the code to make this work for both FF and IE (where it used to only work in IE).
what you were missing was the 'parentNode'.

you may want to add some handling for when no selection is made.

rlemon

01-10-2006, 06:28 PM

shoot - i misread you specs...

rlemon

01-10-2006, 09:41 PM

OK!

i've looked into this.

the onMouseUp will always read the target as the onMouseDown element when going between form elements.

from a form element to anything else - works
anything else to a form element - works

what i'm going to try and do is, read the top,left,height,and width of the form element then verify from the mouse position that you have not (or in fact have) entered another form element - then i will simply run the check on the name. hope this all works - check back soon for the code.

shafi_363

01-15-2006, 05:45 PM

Hi rlemon,

Thanks a lot for looking into my problem. I could nt understand why this "mouseup" event is not working in between FORM elements. I hope that u would have reproduced my problem.

You have mentioned in your reply to follow , coordintate based checking whle dropping between form elements. That sounds good....Actually, now i am following that only ;) since i have left with no other options. But there i am encountering one serious problem :( Here is my problem..

"I am taking help of coordinates for Drag & drop operation between 2 list boxes Since mouseup event was not helping me in giving the target element( HTML OPTION Element on which the mouse has been released)

Right now i am calculating the index (at which the dragged item has to be inserted) by event.clientX, event.clientY. And then formula for "index" is

(offset of List box) - ( event.clientY)
---------------------------------------
(height of each item)

This is working in all conditions, except when the list box contains more items than its size. Because then scrollbar comes into picture. Then my calculation is going wrong. Is there any remedy to find the correct index even when there is scroll bar.

Exceptional case:
================
If i specify the size of list box as 10. and then i put 20 items in that list box. Then scroll bar appears. Drag that scrollbar completely down. Then it will show last 10 items. And after dragging the item from other list box to this , i released my mouse on 13 th item. then the item should be inserted at 14 th position. BUT FOR ME ITS INSERTING AT 4 TH POSITION. "

Thanks & Regards
--Shafi