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

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-02-08 (日) 19:18:53 | 最終更新:2015-02-12 (木) 12:34:33

前回の 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"]') // 誤

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

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-02-08 (日) 19:18:53 | 最終更新:2015-02-12 (木) 12:34:33

1件のコメント »

  1. Comment by BestTonia — 2019/7/28 日曜日 @ 20:31:43

    I see you don’t monetize undo.jp, don’t waste your traffic, you can earn extra
    cash every month with new monetization method. This is the
    best adsense alternative for any type of website
    (they approve all sites), for more details simply search in gooogle: murgrabia’s tools

RSS feed for comments on this post. TrackBack URI

Leave a comment