Question

我正在尝试创建一个用户界面，可以将项目拖放到项目所在的框中。但是，如果用户决定将另一个项目拖放到同一个框中，则新项目将替换旧项目，旧项目将恢复为<ul>列表。

到目前为止，我完全按照我想要的方式工作，但是在将<li>项追加到<ul>列表后，还原的问题是还原<div id="droppable_tag">  </div>  <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>  <input type="text" name="news_tagid" id="news_tagid" value="" />项不再可拖动< / p>

HTML看起来像这样（它里面有一些Smarty代码，但我觉得你能得到图片）：

<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>

javascript啊，mateys：

{{1}}

任何想法，男士们？

Answer 1

问题似乎是您在拖动替换时创建新的li标记，并且新标记不会对其进行任何绑定。看起来你只是在丢弃之后隐藏了li，所以我的建议是显示旧的li而不是创建一个新的li。绑定仍将存在于隐藏列表项中。

Answer 2

之前我遇到过类似的情况，我只是在drop事件及其工作中复制了可拖动的赋值。所以我认为你可以尝试这样做：

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

作为一个函数，然后在你追加li之后再次调用它。

希望这有帮助！

使用jquery ui draggable和droppable一次只选择一个项目

2 个答案: