Hey man...
I am trying to customize the drag and drop feature and am running into a few issues.
Basically I need the left side items to be drag and droppable to the right side items.
I analyzed this http://ui-dev.jquery.com/demos/droppable/#revert but couldn't get it to work from left to right (i.e. I did get it to work on the left side only).
Right now, when you drag an item from the left (i.e. ul#named-tag... see the code below), and try to drop it on the right, it just gets added as a new tag. The right and left are both sortable and I connectWith works only with like items right?
In "connectWith" in the code below, it just has 'ul#item-list'. Do you know how I might be able to target each chat item?
It looks like the data in the chat side on the right is being stored as 'in memory data', so I am not able to view source and readily see li tag id's.
<script type="text/javascript">
$(document).ready(function(){
$("ul#people-tag").sortable({connectWith: 'ul#item-list',
helper: 'clone',
start: function(event, ui){
$("ul#people-tag").find('li:hidden').show();
}
});
$("ul#named-tag").sortable({connectWith: 'ul#item-list',
helper: 'clone',
start: function(event, ui){
$("ul#named-tag").find('li:hidden').show();
}
});
$("ul#item-list").sortable({receive: function(event, ui){
txt = 'Tag : ' + ui.item.text().trim();
if (ui.item.hasClass('people-tag')){
$("ul#people-tag").append(ui.item)
}else{
$("ul#named-tag").append(ui.item)
alert("hello");
}
$('#text-area').val(txt)
jQuery.ajax({
data: 'id='+ui.item.attr('tag-id')+'&session_id='+ui.item.attr('session'),
dataType: 'script',
type: 'post',
url: "/ria/create_tag_for_session"
});
$('#share-data').submit()
}
});
});
</script>
Thanks for any help or direction on this.