ドラッグアンドドロップで配置を変える

Question

前提・実現したいこと

https://qiita.com/pekoporin/items/65de9d1ee3adc9456b54
このサイトの様にグリッドをドラッグアンドドロップしてきて追加できるようにしたい

該当のソースコード

<div class="le-menu">
              <div class="left_menu_title">グリッド</div>
              <div class="whole_grid">
                <div id="grid_1col" class="grid_col le-leftpanel-item__grid">1COL</div>
                <div id="grid_2col" class="grid_col le-leftpanel-item__grid">2COL</div>
                <div id="grid_3col" class="grid_col le-leftpanel-item__grid">3COL</div>
              </div>
              <div class="left_menu_title">ブロック</div>
              <div class="whole_block">
                <div id="block_text" class="grid_block">TEXT</div>
                <div id="block_img" class="grid_block">IMAGE</div>
              </div>
            </div>
            <div class="main_center">
            <div id="parent_table">
              <div class="le-block-edge"></div>
              <div class="le-block" id="block1"> block1block1block1block1block1block1block1block1block1block1block1block1block1block1block1 </div>
              <div class="le-block-edge"></div>
              <div class="le-block" id="block2"> block2block2block2block2block2block2block2block2block2block2block2block2block2block2block2 </div>
              <div class="le-block-edge"></div>
              <div class="le-block" id="block3"> block3block3block3block3block3block3block3block3block3block3block3block3block3block3block3 </div>
              <div class="le-block-edge"></div>
              <div class="le-object_unplaced"></div>
            </div>

$(function () {
	//ドラッグアンドドロップ
	$('.le-block').on('MSPointerDown touchstart mousedown', function (e) {
		$(this).closest('.le-block').pep({
			shouldEase: false,
			place: false,
			droppable: ".le-block-edge", // dropを許可する要素
			revert: true,
			start: function (ev, obj) {
				// ドロップ可能エリアを表示
				$(".le-block-edge").show();
			},
			drag: function (ev, obj) {
				if (obj.activeDropRegions.length >= 1) {
					$(obj.activeDropRegions).each(function (index) {
						if (index) {
							$(this).removeClass(obj.options.droppableActiveClass);
						}
					});
				}
			},
			stop: function (ev, obj) {
				// ドロップ可能エリアを非表示に
				$(".le-block-edge").hide();

				// ドロップ可能エリアの後ろにドラッグしたブロックとその直後のドロップ可能エリアを挿入
				obj.$el.next().insertAfter(obj.activeDropRegions[0]);
				obj.$el.insertAfter(obj.activeDropRegions[0]);
			}
		});
	});
	$('.le-leftpanel-item__grid').on('click', function (e) {
		var $temp = $($($(this).attr('data-template')).text());
    console.log($(this).attr('data-template'));
    console.log($temp);
		$temp.prop('id', Math.floor($.now()));
		$temp.find('.le-grid__menu_id').text($temp.prop('id'));
		$('.le-object_unplaced').show().html($temp);

		$('.le-object_unplaced .le-grid').pep({
			shouldEase: false,
			place: false,
			droppable: ".le-block-edge", // dropを許可する要素
			revert: true,
			start: function (ev, obj) {
				// ドロップ可能エリアを表示
				$(".le-block-edge").show();
			},
			drag: function (ev, obj) {
				if (obj.activeDropRegions.length >= 1) {
					$(obj.activeDropRegions).each(function (index) {
						if (index) {
							$(this).removeClass(obj.options.droppableActiveClass);
						}
					});
				}
			},
			stop: function (ev, obj) {
				obj.$el.insertAfter(obj.activeDropRegions[0]);
				$('.le-object_unplaced').hide();
				$(obj.activeDropRegions).each(function () {
					$(this).removeClass(obj.options.droppableActiveClass);
				});
				$.pep.unbind(obj.$el);
				obj.$el.attr({
					style: ''
				});
				// 空グリッドの場合セルに空クラスを付与
				if (!obj.$el.find('.le-block').length) {
					obj.$el.find('.mdl-cell').addClass('le-grid__empty');
				}
			}
		});
	});
});

困っていること

テンプレートをHTMLで用意してそれをアクティブにしドラッグアンドドロップしようとしているのですがうまくいきません。

var $temp = $($($(this).attr('data-template')).text());

この仕組みがよく分からないのですがJSでどうやってテンプレートを取ってきているのでしょうか？ご教授頂けると幸いです

補足情報（FW/ツールのバージョンなど）

pep.js

Answer 1

参照しているQiitaの記事にて、追加用の要素を用意している".le-leftpanel-item__grid"側の作り方が解説されていないようなので、Qiitaにコメント投稿して投稿者本人に聞くのが最も正確な回答が得られると思います。

一応、私からの回答は書いておきます。
が、動確せずに脳内妄想で回答しているので間違ってたらすみません。。

"data-template"属性にどういう値を設定しててどうやってtemplateを参照させようとしているのか、はっきりはわからないのですが、おそらく

<div id="grid_1col" class="grid_col le-leftpanel-item__grid" data-template="#le-grid-template-col1">1COL</div>

こんなふうにテンプレートのセレクタを入れてあるんじゃないかなと...

テンプレートの作り方は参考にされているQiitaの記事に書いてあるのでその通り作ってみたらいいと思います。
グリッドを追加できるようにする（sample-3）
記事でも言われている通り、templateタグを利用してもいいと思います。

Comments

[MikMik]

ありがとうございます！これで試してみます！