/    Sign up×
Community /Pin to ProfileBookmark

Drag and drop in select list?

Copy linkTweet thisAlerts:
Mar 07.2007

Hello,
Basically, I have a select which is being filled in dynamically.
I would like the user to be able to sort this list as he wants (using drag and drop)… but I don’t have a clue how to do it.
I have been told that I can use “scriptaculous” but I cannot manage to make it work with select. The thing is that I cannot use it with a <ul> list since I need to be able to select an item by clicking on it.
Could you please help me?

I have simplified the code…

[code]
<html>
<head>
<script language=JavaScript>
function getSelect(s)
{
alert(“selectedOptionText=”+s.options[s.selectedIndex].text);
}
</script>
<body>
<form onSubmit=”return false” method=”post” name=”myForm” action=””>
<table border=”2″>
<tbody>
<tr><th>Services</th></tr>
<tr>
<td><select name=”service_list” size=5 style=”width:150px” onClick=”getSelect(this)”>
<option value=”something1″>S1</option>
<option value=”something2″>S2</option>
</select>
</td></tr>
</tbody>
</table>
</form>
</body>
</html>
[/code]

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@vwphillipsMar 07.2007 — Std select list options cannot be dar & dropped

either use a fake select or buttons

Examples on my site below
Copy linkTweet thisAlerts:
@celia05esauthorMar 07.2007 — If I cannot use a select list, I could use a <ul> list.... I know how to drag and drop with a list.... but I don't know how to select an element clicked on :
<i>
</i>.... onClick=getSelect(this)
....
function getSelect(this)
{
selectedOptionText=.....
selectedOptionValue=....
}


Could you help me with that?

I would like to do something like:
<i>
</i>&lt;ul&gt;
&lt;li value="20" onClick=getSelect(this)&gt;value20&lt;/li&gt;
&lt;li value=·30" onClick=getSelect(this)&gt;value30&lt;/li&gt;
&lt;/ul&gt;
Copy linkTweet thisAlerts:
@vwphillipsMar 07.2007 — [CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function getSelect(obj){
alert('value = '+obj.className+'ntext = '+obj.innerHTML);
}
//-->
</script></head>

<body>
<ul>
<li class="20" onClick=getSelect(this)>tom</li>
<li class="30" onClick=getSelect(this)>dick</li>
</ul>
</body>

</html>[/CODE]
Copy linkTweet thisAlerts:
@celia05esauthorMar 07.2007 — THank you so much !!

I just have one more question.... I would like the user to be able to add or delete a value. COuld you tell me how I should do, please?

I have managed to do it with the select (it cost me time!) but I don't know how to do it with <ul> list!

THanks
Copy linkTweet thisAlerts:
@celia05esauthorMar 07.2007 — OK. I have found how to remove a child element ... but cannot manage to add a new value... help me please!
Copy linkTweet thisAlerts:
@celia05esauthorMar 07.2007 — I was wondering if it would not be better to put the onClick envent on the ul (and not on every li).... how should I modify the getSelect function?
×

Success!

Help @celia05es spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...