今日の人気記事

  1. 画像ポップアップ・スライドショー「Lightbox 2」
  2. 指定した数値から折れ線グラフを描画「SimpleChart」
  3. 編集可能なリストを作成「Editable Listview」
  4. シンプルなレスポンシブ・トップメニュー「PrMenu」
  5. select要素を検索できるように「Chosen」

ドラッグ&ドロップできるグリッド要素を実装「Shapeshift」

スポンサーリンク

ドラッグ&ドロップできるグリッド要素を実装するプラグイン「Shapeshift」を紹介します。

jQueryプラグイン「Shapeshift」

このプラグインを使えば、マウスを使って自由自在に動かせるグリッド要素を実装することができます。

また、要素をドラッグ&ドロップにはアニメ効果付きなので、サイトにおもしろい効果を付加できそうです。

スポンサーリンク

それではデモページのグリッドをドラッグしてみてください。

「Shapeshift」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Shapeshift のデモでーす。">
<title>Shapeshift - jQuery Plugin Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="js/jquery.touch-punch.min.js"></script>
<script src="js/jquery.shapeshift.js"></script>
<script>
$(document).ready(function() {
  $("#demo").shapeshift();
});
</script>
<style>
#demo {
  position: relative;
}
#demo > div {
  border: solid 1px blue;
  position: absolute;
  height: 150px;
  width: 150px;
}
#demo > .ss-placeholder-child {
  background: transparent;
  border: 1px dashed blue;
}
</style>

</head>
<body>
<p><a href="https://webkaru.net/jquery-plugin/shapeshift/">「jQueryプラグインまとめ」に戻る</a></p>


<h1>Shapeshift のデモ。</h1>
<p>ドラッグ&ドロップしてみてください。</p>
<div id="demo">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)