How to implement drag drop items from one listbox to another using jQuery? RSS

• • Reply
  

  pranavaa

  Member

  8 Points

  5 Posts

  How to implement drag drop items from one listbox to another using jQuery?

  Sep 19, 2011 06:40 AM|LINK

  Hi All,

  I am a newbie to jQuery. I want to implement drag and drop items from one list box to another listbox without postback (using jQuery). On searching I came across jQuery Sortable and connected lists in it. Here is the link for it - http://jqueryui.com/demos/sortable/#connect-lists

  But it is for unordered lists (ul) and the ListBox renders as select - option in HTML. Could some one tell me how to implement it for ASP.NET ListBox?

  Thanks in advance!

• • Reply
  

  asteranup

  All-Star

  30184 Points

  4906 Posts

  Re: How to implement drag drop items from one listbox to another using jQuery?

  Sep 19, 2011 07:10 AM|LINK

  Hi,

  Try these-

  http://forums.asp.net/p/1699659/4506439.aspx/1?Re+jQuery+Keep+Draggable+s+clone

  http://forums.asp.net/t/1643755.aspx

  http://forums.asp.net/p/1684510/4434573.aspx/1?Re+jQuery+Drag+and+Drop+Database

  Thanks & Regards
  Anup Das Gupta
  Mark as Answer if you feel so. Visit My Blog
• • Reply
  

  pranavaa

  Member

  8 Points

  5 Posts

  Re: How to implement drag drop items from one listbox to another using jQuery?

  Sep 20, 2011 06:40 AM|LINK

  Hi asteranup,

  Thanks for your reply and the links. The examples in the links you have provided are explaining drag-drop in terms of ul (unordered list). I am a bit clueless on how to implement it for ASP.NET ListBox controls. ListBox control is rendering as SELECT in HTML.

  Can you please tell me how to implement this for SELECT control?

  Thank you! 

• • Reply
  

  asteranup

  All-Star

  30184 Points

  4906 Posts

  Re: How to implement drag drop items from one listbox to another using jQuery?

  Sep 20, 2011 06:59 AM|LINK

  Hi,

  Are you using any plugin? I dont think its possible to use drag and drop with select type.

  Thanks & Regards
  Anup Das Gupta
  Mark as Answer if you feel so. Visit My Blog
• • Reply
  

  pranavaa

  Member

  8 Points

  5 Posts

  Re: How to implement drag drop items from one listbox to another using jQuery?

  Sep 20, 2011 08:50 AM|LINK

  I tried to use jQuery sortable. But invain. So, started writing from scratch. Meanwhile posted here hoping that someone who already worked on it posts some clue. 

  Thanks for your prompt replies. Those are very helpful!

• • Reply
  

  pranavaa

  Member

  8 Points

  5 Posts

  Re: How to implement drag drop items from one listbox to another using jQuery?

  Sep 23, 2011 02:00 PM|LINK

  Hi All,

  I have opted for jQuery sortable and got drag-drop multiple items from one list to another list. But couldn't get to know how to insert multiple items at a specific position (index) in second list.

  Please let me know how to do this.

  Thanks!

• • Reply
  

  ibrahim.mara...

  Member

  110 Points

  36 Posts

  Re: How to implement drag drop items from one listbox to another using jQuery?

  Sep 26, 2011 07:55 PM|LINK

  This is full toturial to explain how to Drag and Drop items between different lists with auto saving via AJAX using jquery

  http://www.magic-dev.com/drag-and-drop-items-ajax.htm

  Drag Drop JQuery ajax

  • Edited by ibrahim.marasa on Sep 26, 2011 07:55 PM
  • Edited by Yanping Wang - MSFT on Oct 11, 2011 07:54 AM
  • Edited by Yanping Wang - MSFT on Oct 11, 2011 07:54 AM
• • Reply
  

  pranavaa

  Member

  8 Points

  5 Posts

  Re: How to implement drag drop items from one listbox to another using jQuery?

  Sep 27, 2011 08:36 AM|LINK

  Hi Ibrahim,

  I am looking for drag-drop multiple items from one list to another list.

  I have done this. But couldn't place the selected items in a specific position in second list. Could you please give some pointers to it?

  dragdrop Drag Drop JQuery ajax

• • Reply
  

  ibrahim.mara...

  Member

  110 Points

  36 Posts

  Re: How to implement drag drop items from one listbox to another using jQuery?

  Oct 01, 2011 11:16 AM|LINK

  Hi pranavaa,

  Here you will find tutorial (with demo) which you looking for:

  http://www.magic-dev.com/drag-drop-multiple-items.htm

  • Edited by ibrahim.marasa on Oct 01, 2011 11:18 AM
  • Marked as answer by Yanping Wang - MSFT on Oct 11, 2011 07:55 AM
• • Reply
  

  raju dasa

  Star

  14396 Points

  2449 Posts

  Re: How to implement drag drop items from one listbox to another using jQuery?

  Nov 06, 2011 02:34 PM|LINK

  HI,
  
  Recently, thats my requirement too, i started experimenting with jquery
  without using UL tag, and i succeded in creating one.
  
  check my blog post: drag and drop list items (multiple)
  
  may be useful for those who are in search of one!

  Happy Coding ! Mark as Answer if it helps.
  rajudasa.blogspot.com  ||  blog@opera