Solved

Seeking "drag and drop" code that works well for 'select' listboxes

Posted on 2009-06-29
14
282 Views
Last Modified: 2012-05-07
I have "select" listboxes on my webpage and I'm seeking code that will enable 'drag and drop' functionality.  Can this be done with 'select' listboxes?  References to sample code please?

Thanks!
0
Comment
Question by:BBRRGG
  • 4
  • 4
  • 2
  • +1
14 Comments
 
LVL 8

Expert Comment

by:lharrispv
ID: 24737633
I am not sure what you asking.  You want your end users to be able to drag the list box to somewhere else on their screen?  Is this correct?
0
 

Author Comment

by:BBRRGG
ID: 24737661
Not the listbox itself... just strings from within 1 'select' listbox to another 'select' listbox.
0
 
LVL 8

Expert Comment

by:lharrispv
ID: 24737823
I am sorry I am still not sure I am following.  Is this what you are asking?
Assume these are my two lists....
List 1
- buttons
-threads
-processes

list 2
- servers
- work stations
- routers

You want your end user to be able to select buttons from the list 1 and drag it and dop it into list 2 so that list 2 now reads

list 2
- servers
- work stations
- routers
- buttons

and list one would now read

List 1
- threads
-processes
?

If so may I ask why?
0
 
LVL 11

Expert Comment

by:tobzzz
ID: 24738562
I would say you could customise this code, it uses jQuery:
http://thechriswalker.net/select-drag/

it's probably just changing <DIV> to <OPTION> fundamentally.
0
 

Author Comment

by:BBRRGG
ID: 24738765
lharrispv: "...You want your end user to be able to select 'buttons' from the list 1 and drag it and dop it into list 2..."

Correct, except the records in List1 do not necessarily have to disappear from List1 when they are dragged to List2.  The reason is to allow this webpage user to build his/her customized list from a larger list.
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 8

Expert Comment

by:lharrispv
ID: 24739063
0
 

Author Comment

by:BBRRGG
ID: 24741669
lharrispv: these sites appear to be for Windows forms, not web forms

tobzzz:
http://thechriswalker.net/select-drag/
this would work, but it uses <ul> (unordered lists) and not listboxes.  

Any further suggestions would be greatly appreciated on how to move records between listboxes on web forms.
0
 
LVL 40

Expert Comment

by:mrjoltcola
ID: 24775455
I have no specific sample code, but I did not see anyone mention ExtJS. Here is a Javascript framework we use, and it does have drag-and-drop capability.

Try this sample, it includes draggable components.

http://www.extjs.com/deploy/dev/examples/desktop/desktop.html
0
 
LVL 40

Accepted Solution

by:
mrjoltcola earned 200 total points
ID: 24775460
Actually here is a sample using a grid.

http://extjs.com/deploy/dev/examples/dd/dnd_grid_to_grid.html
0
 
LVL 8

Assisted Solution

by:lharrispv
lharrispv earned 200 total points
ID: 24803437
0
 

Author Closing Comment

by:BBRRGG
ID: 31597977
Great, thanks!
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
In this article we will get to know that how can we recover deleted data if it happens accidently. We really can recover deleted rows if we know the time when data is deleted by using the transaction log.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
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…

707 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now