Draggable and Resizable using jQuery

by Dhanck

HTML

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div  id="resizable" class="dashboard">
  
  <div class="glyphicon glyphicon-remove close"></div>
  <div class="glyphicon glyphicon-cog close"></div>
  <div class="title">Manual Tasks</div>
</div>

CSS

.dashboard {
  width: 368px;
  min-width: 150px;
  height: 228px;
  min-height: 150px;
  margin: 40px;
  border: 3px solid #fff;
  border-radius: 2px;
  display: block;
}
.dashboard:hover{
    border: 3px dotted #ccc;
    cursor: move;
}
.title {
  margin: 5px;
  font-family: 'century gothic';
  font-weight: bold;
  color: #484141;
  font-size: 16px;
}
.close {
  margin: 5px;
  font-size: 12px!important;
  display: none!important;
}
.ui-icon {
  display: none!important;
}
.dashboard:hover .ui-icon, .dashboard:hover .close{
  display: block!important;
}
.ui-resizable-resizing > .dashboard{
  border: 3px dotted #ccc;
}

JavaScript

$('#resizable')
  .draggable()
  .resizable();
$('#resizable')
  .resizable({
    start: function (e, ui) {
      //alert('resizing started');
    },
    resize: function (e, ui) {

    },
    stop: function (e, ui) {
      //alert('resizing stopped');
    }
  });