Pretty Draggable Tag Box Plugin with jQuery - Tag Me
File Size: | 2.57 KB |
---|---|
Views Total: | 3673 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Tag Me is a really simple jQuery script to converts a regular textarea into a pretty, animated tag input box which allows you to:
- Press Enter to add tags.
- Double Click to modify a tag.
- Click on x, Double Backspace or remove all text and press Enter to delete a tag.
- Sort tags using jQuery UI draggable.
1. Load the necessary jQuery library and jQuery UI's JavaScript & CSS in the document.
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
2. Create a textarea that contains a list of prepredefined tags separated by Space.
<textarea class="tagarea"> jQuery JavaScript Ruby Python PHP </textarea>
3. The core CSS to style the tags input box.
.tagarea { display: none; } .tag-box { list-style: none; padding: 3px; margin: 0; display: inline-block; font-family: arial; width: 100%; border: 1px solid #F44336; border-radius: 4px; } .tag-box * { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .tag-box li { padding: 4px 6px; float: left; display: inline-block; } .tag-box li.tags { background: #2196F3; color: #fff; border-radius: 4px; margin: 4px 3px; position: relative; } .tag-box li.tags .close { display: inline-block; position: absolute; color: #BBDEFB; overflow: hidden; width: 0; right: 0; height: 18px; cursor: pointer; top: 4px; } .tag-box li.tags .close:after { content: 'x'; } .tag-box li.tags.edit { background: none; border: 1px solid #2196F3; color: #2196F3; } .tag-box li.tags.edit .input-tag { height: auto; } .tag-box li.tags.edit:hover { padding: 4px 6px; } .tag-box li.tags.danger { background: #F00; opacity: 0.8; } .tag-box li.tags:hover { padding-right: 18px; } .tag-box li.tags:hover .close { width: 14px; } .tag-box li .input-tag { color: #fff; height: 24px; vertical-align: middle; border: none; outline: none; background: none; } .tag-box li .input-tag:hover, .tag-box li .input-tag:focus { outline: none; border: none; }
4. The JavaScript(jQuery) to active the draggable tags input box.
var backSpace; var close = '<a class="close"></a>'; var PreTags = $('.tagarea').val().trim().split(" "); $('.tagarea').after('<ul class="tag-box"></ul>'); for (i=0 ; i < PreTags.length; i++ ){ $('.tag-box').append('<li class="tags">'+PreTags[i]+close+'</li>'); } $('.tag-box').append('<li class="new-tag"><input class="input-tag" type="text"></li>'); // Taging $('.input-tag').bind("keydown", function (kp) { var tag = $('.input-tag').val().trim(); $(".tags").removeClass("danger"); if(tag.length > 0){ backSpace = 0; if(kp.keyCode == 13){ $(".new-tag").before('<li class="tags">'+tag+close+'</li>'); $(this).val(''); }} else {if(kp.keyCode == 8 ){ $(".new-tag").prev().addClass("danger"); backSpace++; if(backSpace == 2 ){ $(".new-tag").prev().remove(); backSpace = 0; } } } }); //Delete tag $(".tag-box").on("click", ".close", function() { $(this).parent().remove(); }); $(".tag-box").click(function(){ $('.input-tag').focus(); }); // Edit $('.tag-box').on("dblclick" , ".tags", function(cl){ var tags = $(this); var tag = tags.text().trim(); $('.tags').removeClass('edit'); tags.addClass('edit'); tags.html('<input class="input-tag" value="'+tag+'" type="text">') $(".new-tag").hide(); tags.find('.input-tag').focus(); tag = $(this).find('.input-tag').val() ; $('.tags').dblclick(function(){ tags.html(tag + close); $('.tags').removeClass('edit'); $(".new-tag").show(); }); tags.find('.input-tag').bind("keydown", function (edit) { tag = $(this).val() ; if(edit.keyCode == 13){ $(".new-tag").show(); $('.input-tag').focus(); $('.tags').removeClass('edit'); if(tag.length > 0){ tags.html(tag + close); } else{ tags.remove(); } } }); }); // sorting $(function() { $( ".tag-box" ).sortable({ items: "li:not(.new-tag)", containment: "parent", scrollSpeed: 100 }); $( ".tag-box" ).disableSelection(); });
This awesome jQuery plugin is developed by vineethtr. For more Advanced Usages, please check the demo page or visit the official website.