前提・実現したいこと
https://qiita.com/pekoporin/items/65de9d1ee3adc9456b54
このサイトの様にグリッドをドラッグアンドドロップしてきて追加できるようにしたい
該当のソースコード
HTML
1<div class="le-menu"> 2 <div class="left_menu_title">グリッド</div> 3 <div class="whole_grid"> 4 <div id="grid_1col" class="grid_col le-leftpanel-item__grid">1COL</div> 5 <div id="grid_2col" class="grid_col le-leftpanel-item__grid">2COL</div> 6 <div id="grid_3col" class="grid_col le-leftpanel-item__grid">3COL</div> 7 </div> 8 <div class="left_menu_title">ブロック</div> 9 <div class="whole_block"> 10 <div id="block_text" class="grid_block">TEXT</div> 11 <div id="block_img" class="grid_block">IMAGE</div> 12 </div> 13 </div> 14 <div class="main_center"> 15 <div id="parent_table"> 16 <div class="le-block-edge"></div> 17 <div class="le-block" id="block1"> block1block1block1block1block1block1block1block1block1block1block1block1block1block1block1 </div> 18 <div class="le-block-edge"></div> 19 <div class="le-block" id="block2"> block2block2block2block2block2block2block2block2block2block2block2block2block2block2block2 </div> 20 <div class="le-block-edge"></div> 21 <div class="le-block" id="block3"> block3block3block3block3block3block3block3block3block3block3block3block3block3block3block3 </div> 22 <div class="le-block-edge"></div> 23 <div class="le-object_unplaced"></div> 24 </div>
Javascript
1$(function () { 2 //ドラッグアンドドロップ 3 $('.le-block').on('MSPointerDown touchstart mousedown', function (e) { 4 $(this).closest('.le-block').pep({ 5 shouldEase: false, 6 place: false, 7 droppable: ".le-block-edge", // dropを許可する要素 8 revert: true, 9 start: function (ev, obj) { 10 // ドロップ可能エリアを表示 11 $(".le-block-edge").show(); 12 }, 13 drag: function (ev, obj) { 14 if (obj.activeDropRegions.length >= 1) { 15 $(obj.activeDropRegions).each(function (index) { 16 if (index) { 17 $(this).removeClass(obj.options.droppableActiveClass); 18 } 19 }); 20 } 21 }, 22 stop: function (ev, obj) { 23 // ドロップ可能エリアを非表示に 24 $(".le-block-edge").hide(); 25 26 // ドロップ可能エリアの後ろにドラッグしたブロックとその直後のドロップ可能エリアを挿入 27 obj.$el.next().insertAfter(obj.activeDropRegions[0]); 28 obj.$el.insertAfter(obj.activeDropRegions[0]); 29 } 30 }); 31 }); 32 $('.le-leftpanel-item__grid').on('click', function (e) { 33 var $temp = $($($(this).attr('data-template')).text()); 34 console.log($(this).attr('data-template')); 35 console.log($temp); 36 $temp.prop('id', Math.floor($.now())); 37 $temp.find('.le-grid__menu_id').text($temp.prop('id')); 38 $('.le-object_unplaced').show().html($temp); 39 40 $('.le-object_unplaced .le-grid').pep({ 41 shouldEase: false, 42 place: false, 43 droppable: ".le-block-edge", // dropを許可する要素 44 revert: true, 45 start: function (ev, obj) { 46 // ドロップ可能エリアを表示 47 $(".le-block-edge").show(); 48 }, 49 drag: function (ev, obj) { 50 if (obj.activeDropRegions.length >= 1) { 51 $(obj.activeDropRegions).each(function (index) { 52 if (index) { 53 $(this).removeClass(obj.options.droppableActiveClass); 54 } 55 }); 56 } 57 }, 58 stop: function (ev, obj) { 59 obj.$el.insertAfter(obj.activeDropRegions[0]); 60 $('.le-object_unplaced').hide(); 61 $(obj.activeDropRegions).each(function () { 62 $(this).removeClass(obj.options.droppableActiveClass); 63 }); 64 $.pep.unbind(obj.$el); 65 obj.$el.attr({ 66 style: '' 67 }); 68 // 空グリッドの場合セルに空クラスを付与 69 if (!obj.$el.find('.le-block').length) { 70 obj.$el.find('.mdl-cell').addClass('le-grid__empty'); 71 } 72 } 73 }); 74 }); 75});
困っていること
テンプレートをHTMLで用意してそれをアクティブにしドラッグアンドドロップしようとしているのですがうまくいきません。
var $temp = $($($(this).attr('data-template')).text());
この仕組みがよく分からないのですがJSでどうやってテンプレートを取ってきているのでしょうか?ご教授頂けると幸いです
補足情報(FW/ツールのバージョンなど)
pep.js
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/08 03:03