CODEWITHSUNDEEP
jqueryjquery-ui
Valhallen
Valhallen

Reputation: 60

select only one item at a time with jquery ui draggable and droppable

I'm trying to create a user interface where it would be possible to drag and drop an item to a box where the item would stay. But if the user decides to drag and drop another item into that very same box, then the new item would replace the old on and the old one would revert back to the <ul> list.

So far I got it all working just the way I want it to, but there's an issue where the reverted <li> items are not draggable any more after they are appended back to the <ul> list

The HTML looks like this (it has some Smarty code in it, but I think you get the picture):

<div id="droppable_tag">
    <!-- drop stuff here and the display the item name -->
</div>

<!-- ye olde list o' tags -->
<ul id="draggable_tags">
    {foreach $tags_arr as $tag}
    {if $tag.tagid neq $current_tagid}
    <li style="cursor:move;" id="tagid_{$tag.tagid}">{$tag.tag}</li>
    {/if}
    {/foreach}
</ul>

<!-- display the tag id in this field -->
<input type="text" name="news_tagid" id="news_tagid" value="" />

javascript ahoy, mateys:

<script>
$(document).ready(function(){
    $('#draggable_tags>li').draggable({
        cursor: 'move'
        ,revert: 'invalid'
        ,stack: '#droppable_tag'
        ,revert: true
        //,containment: '#forum_post_form'
    });

    $('#droppable_tag').droppable({
        tolerance: 'pointer'
        ,drop: function(event,ui)
        {
            // check if we have any tag id currently
            current_tagid = $('#news_tagid').val();
            if(current_tagid == '' || current_tagid == 'undefined')
            {
                tagid = ui.draggable.attr('id').substring(6);
                tag_title = $('#tagid_'+tagid).text();
                $('#tagid_'+tagid).hide();
                $('#news_tagid').val(tagid);
                $('#droppable_tag').text(tag_title);
            }
            else
            {
                current_tag_title = $('#droppable_tag').text();
                current_tag_title = $.trim(current_tag_title);
                $('#droppable_tag').text('');
                $('#news_tagid').val('');
                //$('#draggable_tags').append('<li style="cursor:move;" id="tagid_'+current_tagid+'">'+current_tag_title+'</li>');
                $('<li style="cursor:move;" id="tagid_'+current_tagid+'">'+current_tag_title+'</li>').appendTo('#draggable_tags');

                tagid = ui.draggable.attr('id').substring(6);
                tag_title = $('#tagid_'+tagid).text();
                $('#tagid_'+tagid).hide();
                $('#news_tagid').val(tagid);
                $('#droppable_tag').text(tag_title);
            }
        }
    });
});
</script>

any ideas, gents?

Upvotes: 0

Views: 759

Answers (2)

shennyL
shennyL

Reputation: 2794

I met similar situation before, and I just duplicate the draggable assignation in the drop event, and its work. So i think you can try to put this: 

 function makeDraggable(){    
    $('#draggable_tags>li').draggable({
    cursor: 'move'
    ,revert: 'invalid'
    ,stack: '#droppable_tag'
    ,revert: true
    //,containment: '#forum_post_form'
});
}

As a function, and then call it again after u append the li .

Hope this help!

Upvotes: 0

Gary.S
Gary.S

Reputation: 7131

The issue seems to be that you are creating new li tags when dragging a replacement over and that new tag will not have any bindings on it. It also appears that you just hide the li after dropping it so my suggestion would be to show the old li rather than creating a new one. The bindings will still exist on the hidden list item.

Upvotes: 1

Related Questions