JQuery UI可拖动标签

我的要求是应该在容器中有标签，用户可以拖动标签并放入输入字段。如何将标记保留为标记而不是文本。JQuery UI可拖动标签

我试过this插件，当我拖动一个标签并放入第一个元素的输入字段时，它工作正常，但是对于第二个标签，它创建了全新的容器，并且在添加第二个标签后，另一个标签不能添加。下面是代码，

<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' 
       }); 
      } 
     }); 
    });

Live demo

来源

2013-01-07 Noor

你能用例子来解释吗？比如它是如何工作的，而不是它想要做什么？ –

我能够解决这个问题，我试着回答，但是Stackoverflow.com不让我在6小时前回答我自己问的问题。 JSfiddle上的演示正是我想要的。谢谢 – Noor

我解决这个问题是这样，这里是demo，我是想实现。

问题是之前，我打电话和启动插件在dropable，这样

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

后来我发现，这个插件还提供addTag()方法，然后我把这个方法对dropable这解决了我的问题而不是上面的代码，我喜欢这样做。

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

这里是由插件检查如果标签alread在输入字段存在还提供了$('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-08 07:10:56 Noor

JQuery UI可拖动标签

回答

相关问题