Shapeshift uygulaması  drag&drop dediğimiz  sürükle  bırak yöntemi ile  nesneleri taşımaya  yarayan bir uygulamadır . Scott Elwood tarafından hazırlanan Shapeshift ile kolaylıkla  sürükle  bırak özelikli örnekler  hazırlayabilirsiniz.  Dokunmatik cihazlar  tarafından  da  kullanılabildiği gibi grid  yani ızgara düzenide bulunuyor. Bir çerçeveden diğerine  nesneleri sürüklediğinizde çerçeve içindeki diğer nesneler otomatik kayarak sürüklediğiniz nesneye yer verdikleri gibi grid özelliği  sayesinde de sürüklemiş olduğunuz nesneler dağınık durmuyor ve düzgün birşekilde sıralanıyorlar. Ayrıca grid  düzeni tarayıcıya duyarlı olduğu çin tarayıcı boyutunu değiştirdiğiniz  zaman nesnelerin nasıl küçüldüğünü ve büyüdüğünü görebilirsiniz.

  Kullanım

• Head etiketler arasına eklemeniz gereken bölümler.

Js dosya adresleri

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
 <script src="../core/jquery.shapeshift.js"></script>

Dokunmatik cihazlar için eklemeniz gereken js dosyası.

<script src="../core/vendor/jquery.touch-punch.min.js"></script>

JavaScript :

<script>
 $(document).ready(function() {
 $(".container").shapeshift();
 })
 </script>

Css :

 <style> .container { border: 1px dashed #CCC; position: relative; }
.container > div {
 background: #AAA;
 position: absolute;
 height: 100px;
 width: 100px;
 }
.container > .ss-placeholder-child {
 background: transparent;
 border: 1px dashed blue;
 }
 </style>

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<div class="container">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>