Drag and close jQuery

Something Like that:
Drag and close jQuery

For that you need to create first html code.

HTML

<div id="source">
    <div class="source ui-state-default">
      <h3>Item 1</h3>
      <ul><a class="removeButton">Remove</a> </ul>
    </div>
    <div class="source ui-state-default">
      <h3>Item 2</h3>
      <ul></ul>
    </div>
    ...
</div> 
<div id="destination"> 
    <div class="dest ui-state-highlight">
      <h3>Ìtem 1</h3>
      <ul></ul>
    </div>
    <div class="dest ui-state-highlight">
      <h3>Ìtem 2</h3>
      <ul></ul>
    </div>
    ....
</div>​

After that add this CSS code.

CSS

#source, #destination{
  width:300px;
  height:200px;
  background:#ccc;
  float:left;
  margin-right:10px;
}
#source div, #destination div{
  width:200px;
  height:50px;
  background:red;
}

Use jQuery Library.
Use this one more jQuery Library.

After that add this JQuery code.

JS

 $('.source').draggable({ revert: 'invalid' });
    $('.dest').draggable({ revert: 'invalid' });
    $('#destination').droppable({
        drop:function(ev, ui){
            var widget = $(this);
            if ($(ui.draggable).find(".removeButton").length == 0)
            {
                var removeButton = $("X").click(function(){
                    var parentDiv = $(this).parent();
                    $(this).remove();
                    parentDiv.appendTo($('#source'))
                     $('#source div').appendTo($('#source'));
                });
                $('h3',ui.draggable).append(removeButton);
            }
        }
    });

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”XebavN” default_tab=”js,result” user=”pradeepanvi”]See the Pen Drag and close jQuery by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]