jquery.shapeshift.js （要素を DnD で並べ替える）
前回の jquery.tile.js （タイル状に配置）で並べたタイル状要素を DnD で自由に並べ替えられるプラグイン。
jquery.shapeshift.js
またもや、下記サイトにお導きをいただきました。
啓文社：[jQuery] タイルをドラッグ＆ドロップで並べ替え
【環境】
[jQuery] 1.11.2, 2.1.3
[jQuery UI] 1.11.2
[jQuery] 1.11.2, 2.1.3
[jQuery UI] 1.11.2
JS
GitHub：jquery.shapeshift
ここから DL して、入手。
すごい数のオプションｗ
- <script type="text/javascript">
- defaults = {
- selector: "*",
- enableDrag: true,
- enableCrossDrop: true,
- enableResize: true,
- enableTrash: false,
- align: "center",
- colWidth: null,
- columns: null,
- minColumns: 1,
- autoHeight: true,
- maxHeight: null,
- minHeight: 100,
- gutterX: 10,
- gutterY: 10,
- paddingX: 10,
- paddingY: 10,
- animated: true,
- animateOnInit: false,
- animationSpeed: 225,
- animationThreshold: 100,
- dragClone: false,
- deleteClone: true,
- dragRate: 100,
- dragWhitelist: "*",
- crossDropWhitelist: "*",
- cutoffStart: null,
- cutoffEnd: null,
- handle: false,
- cloneClass: "ss-cloned-child",
- activeClass: "ss-active-child",
- draggedClass: "ss-dragged-child",
- placeholderClass: "ss-placeholder-child",
- originalContainerClass: "ss-original-container",
- currentContainerClass: "ss-current-container",
- previousContainerClass: "ss-previous-container"
- };
- </script>
HTML
JavaScript 部分
上記オプションの必要部分を、下記で上書きする。
- <script type="text/javascript">
- $(".container").shapeshift({
- minColumns: 3
- });
- </script>
フック
参考サイト には、下記のような記述があった。
こうすることで、フックを作れるのね～。
- <script type="text/javascript">
- $(".container").on('ss-drop-complete', function(e){
- $('.tile').tile(4);
- });
- </script>
要素部分
- <div class="container">
- <div class="tile">要素</div>
- <div class="tile">要素</div>
- <div data-ss-colspan='2'>要素</div>
- <div class="tile">要素</div>
- </div>
CSS
- .container {
- border: 1px dashed #ccc;
- position: relative;
- }
- .container > div {
- background: #CCC;
- height: 100px;
- position: absolute;
- width: 80px;
- }
- .container > div[data-ss-colspan='2'] { width: 170px; }
- .container .ss-placeholder-child {
- background: transparent;
- border: 1px dashed red;
- }
タイルが全て重なってしまう現象
２度起きた。
１度目の原因と解決法は忘れてしまった。。。残念。
原因
JavaScript のシンタックスエラーだった。
Firefox の開発ツールを起動し忘れていた。 😯
- $('[id = "hoge"') // 誤
- $('[id = "hoge"]') // 誤
閉じカッコ（]）が抜けていた。
タイル要素内のテキストボックスの値チェックを入れたときに起きた。