Pretty Draggable Tag Box Plugin with jQuery - Tag Me

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.