OnDragStart doesn't fire for Select Elements. Why?

FancyPrairie · Nov 28, 2006

I have 2 list boxes on my page. I want to drag items from one list box to the other. However, I can't seem to get any of the drag events to fire. I don't know why.

My Select element looks like this:

Code:

<SELECT id=List0 
    ondragstart="window.event.srcElement.ID"
    ondrag="window.event.srcElement.ID"
    ondragend="window.event.srcElement.ID"
<OPTION value=Test1>Test1</OPTION><OPTION 
  value=Test2>Test2</OPTION><OPTION value=Test3>Test3</OPTION><OPTION 
  value=Test4>test4</OPTION><OPTION value=Test5>Test5</OPTION></SELECT>

What's weird is that if I add a onmousedown event for the select box and add the following code, the drag events start firing after I exit the message box.

Code:

msgbox list0.dragdrop

How do I get these events to fire on a list box?

BillyRayPreachersSon · Nov 28, 2006

While I don't know this for sure, I'm guessing that you will not be able to do this as form controls are a different beast to regular elements. And certainly, if you find one browser that does it, I'm guessing other browsers will struggle.

Personally, I'd do what everyone else does (presumably because they've it the same issue?) and have "<" and ">" buttons which move the selected option(s) from one box to another.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

FancyPrairie · Nov 29, 2006

I plan to use the < > method, but would also like to use the dragdrop method. This is for our intranet site so the browser won't be a problem.

I'm developing a web page (for our intranet site) that will contain 2 listboxes. I want to be able to drag items from one list box to the other. But I can't seem to get the drag methods to work.

The drag methods do work using the code below. But only if the msgbox is called. If I don't call the msgbox, then the drag methods are not called.

I would appreciate it if someone would copy the following code and paste it into an html file and then run it. I'm hoping you can tell me what I'm doing wrong.

When the page is displayed, click on an item in the first list box. The OnMouseDown event will cause the msgbox to be displayed. After dismissing the msgbox, click (and hold the mouse down) anywhere outside of the 1st list box and drag the mouse around. You should see the drag events firing in the 3rd list box. And when you drag the mouse into the 2nd list box, you should see those events firing. However, if you comment out the msgbox line of code, the events no longer fire.

I don't understand why this works the way it does. Can you help me?

Code:

<HTML><HEAD>
<SCRIPT language=Javascript>
function ShowResults()
{				// Information about the events 
				 // and what object fired them.
  arg = event.type + "  fired by  " + event.srcElement.id;
    
  oNewOption = new Option(); 
  oNewOption.text = arg;
  oResults.add(oNewOption,0);
}
</SCRIPT>

<SCRIPT language=vbscript>

sub testme()

	msgbox select1.dragDrop             'COMMENT OUT THIS LINE OF CODE

	select1.fireEvent("ondragstart")
	select1.fireevent("ondrag")
	select1.fireEvent("ondragend")

end sub

</script>
</HEAD>

<BODY style="OVERFLOW: auto" vLink=#800080 link=#0000ff>

<SELECT  id=Select1
         onmousedown=testme()
         ondragstart="ShowResults()"
         ondrag="ShowResults()"
         ondragend="ShowResults()"
 
         style="LEFT: 0in; WIDTH: 1in; POSITION: absolute; TOP: 0in; HEIGHT: 1.333in" size=30>
         
         <OPTION value=Option1>Option1</OPTION>
         <OPTION value=Option2>Option2</OPTION>
</SELECT>

<SELECT id=List2 
        ondragenter=ShowResults() 
        ondrop=ShowResults() 
        ondragover=ShowResults()
        style="LEFT: 150px; WIDTH: 1in; POSITION: absolute; TOP: 0in; HEIGHT: 1.333in" size=30>
        <OPTION value=Option3>Option3</OPTION>
        <OPTION value=Option4>Option4</OPTION>
</SELECT>

<SELECT id=oResults 
        style="LEFT: 280px; POSITION: absolute; TOP: 0px" size=30> 
        <OPTION>List of Events Fired</OPTION>
</SELECT>

</BODY></HTML>

BillyRayPreachersSon · Dec 2, 2006

For help with VBScript, you're better off asking in the VBScript forum.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

OnDragStart doesn't fire for Select Elements. Why?

FancyPrairie

Programmer

BillyRayPreachersSon

Programmer

FancyPrairie

Programmer

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor