jquery.shapeshift.js (要素を DnD で並べ替える)

Posted by muchag | jQuery,Library & PlugIn & AddIn | 2015-02-08 (日) 19:18:53

前回の jquery.tile.js (タイル状に配置)で並べたタイル状要素を DnD で自由に並べ替えられるプラグイン。
jquery.shapeshift.js

またもや、下記サイトにお導きをいただきました。
啓文社:[jQuery] タイルをドラッグ&ドロップで並べ替え

【環境】
[jQuery] 1.11.2, 2.1.3
[jQuery UI] 1.11.2
JS

GitHub:jquery.shapeshift
ここから DL して、入手。

すごい数のオプションw

  1. <script type="text/javascript">
  2. defaults = {
  3.     selector: "*",
  4.     enableDrag: true,
  5.     enableCrossDrop: true,
  6.     enableResize: true,
  7.     enableTrash: false,
  8.     align: "center",
  9.     colWidth: null,
  10.     columns: null,
  11.     minColumns: 1,
  12.     autoHeight: true,
  13.     maxHeight: null,
  14.     minHeight: 100,
  15.     gutterX: 10,
  16.     gutterY: 10,
  17.     paddingX: 10,
  18.     paddingY: 10,
  19.     animated: true,
  20.     animateOnInit: false,
  21.     animationSpeed: 225,
  22.     animationThreshold: 100,
  23.     dragClone: false,
  24.     deleteClone: true,
  25.     dragRate: 100,
  26.     dragWhitelist: "*",
  27.     crossDropWhitelist: "*",
  28.     cutoffStart: null,
  29.     cutoffEnd: null,
  30.     handle: false,
  31.     cloneClass: "ss-cloned-child",
  32.     activeClass: "ss-active-child",
  33.     draggedClass: "ss-dragged-child",
  34.     placeholderClass: "ss-placeholder-child",
  35.     originalContainerClass: "ss-original-container",
  36.     currentContainerClass: "ss-current-container",
  37.     previousContainerClass: "ss-previous-container"
  38. };
  39. </script>

 

HTML
JavaScript 部分

上記オプションの必要部分を、下記で上書きする。

  1. <script type="text/javascript">
  2. $(".container").shapeshift({
  3.     minColumns: 3
  4. });
  5. </script>

 

フック

参考サイト には、下記のような記述があった。
こうすることで、フックを作れるのね~。

  1. <script type="text/javascript">
  2. $(".container").on('ss-drop-complete', function(e){
  3.     $('.tile').tile(4);
  4. });
  5. </script>

 

要素部分
  1. <div class="container">
  2.     <div class="tile">要素</div>
  3.     <div class="tile">要素</div>
  4.     <div data-ss-colspan='2'>要素</div>
  5.     <div class="tile">要素</div>
  6. </div>

 

CSS
  1. .container {
  2.     border: 1px dashed #ccc;
  3.     position: relative;
  4. }
  5.  
  6. .container > div {
  7.     background: #CCC;
  8.     height: 100px;
  9.     position: absolute;
  10.     width: 80px;
  11. }
  12.  
  13. .container > div[data-ss-colspan='2'] { width: 170px; }
  14.  
  15. .container .ss-placeholder-child {
  16.     background: transparent;
  17.     border: 1px dashed red;
  18. }

 

タイルが全て重なってしまう現象

2度起きた。
 
1度目の原因と解決法は忘れてしまった。。。残念。
 

原因

JavaScript のシンタックスエラーだった。
Firefox の開発ツールを起動し忘れていた。 😯

  1. $('[id = "hoge"') // 誤
  2.  
  3. $('[id = "hoge"]') // 誤

閉じカッコ(])が抜けていた。
 
タイル要素内のテキストボックスの値チェックを入れたときに起きた。

jQuery,Library & PlugIn & AddIn | 2015-02-08 (日) 19:18:53 |

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment