Hi,
i'm trying to make a drag and drop system for assigning tags, using the
interface plugin.
I'v got two select, the original list and the selected list tags.
The user can add tag, which is done by ajax.
I've got two problems with it ..
The first one is to reverse a choice.. once the user drag and drop a tag
from the original select box to the selected tags one, i can't figure
how to permit reverse action.. i've tried to add the inverse Draggable,
Dropable code, but it doesn't work .. i don't know why, and there are no
JS errors
Second problem, When i update the two selects options while adding a new
tag, and the two select boxes are reloaded by ajax, the drag and drop
comportement does not work anymore..
Here is my code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<title>...</title>
<style type="text/css">
.....
</style>
<script src="/js/jquery-1.2.1.pack.js" type="text/javascript"></script>
<script src="/js/interface.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.list1').Draggable({
zIndex: 1000,
ghosting: true,
revert: true,
opacity: 0.7
});
$('.list2').Draggable({
zIndex: 1000,
ghosting: true,
revert: true,
opacity: 0.7
});
$('#savedlist').Droppable(
{
accept : 'list1',
ondrop: function (drag)
{
add_to_saved(drag);
},
fit: true
});
$('#originallist').Droppable(
{
accept : 'list2',
ondrop: function (drag)
{
add_to_saved(drag);
},
fit: true
});
$("#addtag").click(function() {
$("#tags").empty().load("/lib/tags.php?tag="+$('#new_tag').serialize());
});
});
/**
* add_to_saved()
* Adds items from the original list to the saved list
**/
function add_to_saved(e) {
$('#o'+e.value).remove();
o = '<option class="list2" id="o'+e.value+'"
value="'+e.value+'">'+e.text+'</option>';
$('#savedlist').append(o);
$('#hidden').append('<input type="hidden" name="tags[]"
value="'+e.value+'" />');
}
// -->
</script>
<meta http-equiv='Content-type' content='application/xhtml+xml;
charset=UTF-8' />
</head>
<body>
<div id='main'>
<h1>Indiquez un titre et une description pour vos médias et affectez
leur des tags</h1>
<form action='/Mon-Carnet-de-Voyage/final.php' method="post">
......
......
<div id="tags">
<div id="origdiv">
<h3>Tous les tags</h3>
<select size="5" id="originallist">
<option class="list1" id="o53" value="53">allo</option>
<option class="list1" id="o54" value="54">été</option>
<option class="list1" id="o55" value="55">été_été</option>
<option class="list1" id="o52" value="52">té</option>
</select>
</div>
<div id="saveddiv">
<h3>Tags pour ces medias</h3>
<select class="savedlist" id="savedlist" name="savedlist" size="5">
</select>
</div>
<div style="clear: both;"></div>
<div id="hidden"></div>
</div>
<input type="submit" value="Valider ces informations" />
</form>
<form action="/lib/tags.php" method="post">
<fieldset>
<legend>Ajouter un tag</legend>
<input type="text" name="new_tag" id='new_tag' value="" />
</fieldset>
<input type="button" value="Ajouter ce tag" id='addtag'/>
</form>
</div>
</body>
</html>
Anyone got an idea ?
PS. i've posted the message on nabble jquery forum but it didn't manage
to send it to the list..
