jQuery Event How to - Create a Grid of droggable divs

Question

We would like to know how to create a Grid of droggable divs.
Answer


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type="text/javascript"
  src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style type='text/css'>
.placeholder {<!--from ww  w .jav  a  2  s  .  c o  m-->
  background: #EEE;
  border: 1px dashed #ddd;
  visibility: visible !important;
  float: left;
  margin: 15px;
  display: block;
}

#special {
  width: 232px;
  list-style-type: none;
  float: left;
}

ul {
  padding: 0;
  display: inline-block;
  margin: 0;
  width: 396px;
}

li.general {
  list-style-type: none;
  float: left;
  width: 100px;
}

.widget {
  background: white;
  position: relative;
  display: none;
  border: 1px solid rgb(187, 187, 187);
  margin: 15px;
  z-index: 5;
  display: block;
}

.text {
  padding: 15px;
  border: 1px solid rgb(255, 255, 255);
  height: 80px;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
$(function () {
    $("#sortable").sortable({
        placeholder: "placeholder",
        forcePlaceholderSize: true,
        tolerance: 'pointer',
        revert: true,
        cursor: 'move',
        items: 'li[id!=special]'
    });
    $("#sortable").disableSelection();
});
});//]]>  
</script>
</head>
<body>
  <ul id="sortable">
    <li class="widget general">
      <div class="text">Container 1</div>
      </div>
    </li>
    <li class="widget general">
      <div class="text">Container 2</div>
      </div>
    </li>
    <li class="widget general">
      <div class="text">Container 3</div>
      </div>
    </li>
    <li class="widget" id="special">
      <div class="text">Container 4</div>
      </div>
    </li>
    <li class="widget general">
      <div class="text">Container 5</div>
      </div>
    </li>
    <li class="widget general">
      <div class="text">Container 6</div>
      </div>
    </li>
    <li class="widget general">
      <div class="text">Container 7</div>
      </div>
    </li>
    <li class="widget general">
      <div class="text">Container 8</div>
      </div>
    </li>
  </ul>
</body>
</html>
The code above is rendered as follows: