Search jQuery

jQuery Forum

Using jQuery UI

incutonez

Drag and Drop for Select tags.

in Using jQuery UI • 11 years ago

Hello all, I'm trying to have two lists, like so:

<select size=10 class=select multiple=multiple>
<option>blah</option>
<option>bleh</option>
<option>Jurassic Park</option>
</select>
<select size=10 class=select multiple=multiple>
<option>hi</option>
<option>howdy</option>
<option>Jack Johnson</option>
</select>

So I want to be able to drag text from one list to the other and vice versa. I know there's a way to do this with jQuery-UI, but that seems to only apply to ul and li tags... I was wondering if it was possible through select tags (or some similar structure that has a list of text values you can pick from and drag over to another list)? I'm hoping to find something that exists in jQuery UI or something that I can easily implement.

Also, it's good to note that I want something like http://jqueryui.com/demos/sortable/#empty-lists but obviously with a list of text... the reason why I'm not going this route is because with the select tag, the user can see what they're selecting and if I have a lot of text values, I get a scroll window.

Any ideas would be greatly appreciated! Thanks.

Replies(9)

incutonez

Re: Drag and Drop for Select tags.

11 years ago

So I found this, and will be using it as a model for what I want to do. It's not exactly what I wanted, but it will definitely be close to what I need.

incutonez

Re: Drag and Drop for Select tags.

11 years ago

After further review, I don't think this is something I can use. I really would love to just have a list of text that I can select from (including using control or shift to select multiple options) and drag over to another list and be able to sort this list... is there really no way to do this? I find that hard to believe.

Kevin B

Re: Drag and Drop for Select tags.

11 years ago

Simply put, you cannot drag select options from one select to another or within a single select. your only option is to use ul and li tags, or some other list structure using divs.

Edit: here is a sample.

http://jsfiddle.net/Tentonaxe/XhZff/1/

-- Kevin

incutonez

Re: Drag and Drop for Select tags.

11 years ago

Hrmmm, yeah. That's similar to what I was working on. If I can't use select options, I guess I'm just going to have to make the ul/li tags look and function similar. I think I've almost got the shift-click (highlight to a certain point) portion of my code working... I just feel like it's overkill coding all of this up, but I guess it's the only way if there's no implementation yet.

And thanks, I appreciate the input. You've definitely put to rest that I can't use the select options, or at least can't use it with sortable/droppable.

Kevin B

Re: Drag and Drop for Select tags.

11 years ago

Personally i like using two multiple select side by side with buttons inbetween that move the selected options left and right. It is a pretty common form control that isn't hard for the end user to understand.

-- Kevin

incutonez

Re: Re: Drag and Drop for Select tags.

11 years ago

Yeah, I definitely agree, but I also like having more options open to whomever. I will have the buttons and will include dragging and dropping.

Thanks for your help!

incutonez

Re: Drag and Drop for Select tags.

11 years ago

I know this thread is a little old, but instead of making a new thread, I figured it'd be best to post here...

My elements are list items, and they have a width that extends to the end of the unordered list they're in. So when I drag an element, I'd like to have that element be right under the cursor. Right now, the element trails behind the cursor (depending on where you clicked the element at). What I've been trying to do is setting the object's css top and left values to the cursor's current position, but that doesn't seem to solve the problem.

Just curious if anyone has any insight for me.

Kevin B