3

私の要件は、コンテナにタグが必要であり、ユーザーがタグをドラッグして入力フィールドにドロップできることです。ドロップされたタグをテキストではなくタグとして維持する方法。

このプラグインを試してみました。タグをドラッグして最初の要素の入力フィールドにドロップすると正常に動作しますが、2 番目のタグでは完全に新しいコンテナーが作成され、2 番目のタグを追加した後、別のタグを追加できません。ここにコードがあります、

<ul id="draggable">
    <li>Tag1</li>
    <li>Tag2</li>
    <li>Tag3</li>
    <li>Tag4</li>
</ul>

<p id="topdropped">
    <input id="tags_1" type="text" class="tags" value="" />
</p>

$(function() {
        $("#draggable li").draggable({
            helper : 'clone'
        });
        $("#topdropped").droppable({
            drop : function(event, ui) {

                $(this).find("#tags_1").val(ui.draggable.text());
                $('#tags_1').tagsInput({
                    width : 'auto'
                });
            }
        });
    });

ライブデモ

4

1 に答える 1

2

私はこの問題をこのように解決します。これ が私が達成したかったデモです。

問題が発生する前は、このようにドロップ可能でプラグインを呼び出して開始していました

 $('#tags_1').tagsInput({
      width : 'auto'
   });

後で、このプラグインもメソッドを提供することがわかったので、addTag()このメソッドを呼び出してdropable、上記のコードの代わりに問題を解決しました。

if ($('#tags_1').tagExist(ui.draggable.text())) {
    alert("Already Added.");
    }else {
    $('#tags_1').addTag(ui.draggable.text());
    }

ここ$('selector').tagExist()では、タグが入力フィールドに既に存在するかどうかをチェックするプラグインによっても提供されます。

これは動作しているコードです。

<ul id="draggable">
    <li>Tag1</li>
    <li>Tag2</li>
    <li>Tag3</li>
    <li>Tag4</li>
</ul>

<p id="topdropped">
    <input id="tags_1" type="text" class="tags" value="" />
</p>


<script type="text/javascript">
    $(function() {
        $('#tags_1').tagsInput({
            'defaultText' : '',
            width : 'auto',
            'interactive' : true,
        });
        $("#draggable li").draggable({
            helper : 'clone'
        });
        $("#topdropped").droppable({
            drop : function(event, ui) {                    
                if ($('#tags_1').tagExist(ui.draggable.text())) {
                    alert("Already Added.");
                }else {
                    $('#tags_1').addTag(ui.draggable.text());

                }
            }
        });
    });
</script>
于 2013-01-08T07:10:56.767 に答える