Edited at

ドラッグ&ドロップでコンテンツの配置を変えられるUIを作る (2)

More than 1 year has passed since last update.

ドラッグ&ドロップでコンテンツの配置を変えられるUIを作る (1)の続きです。


グリッドを追加できるようにする(sample-3)

sample-2ではすでに配置されている要素しか利用できないため、新規にGridを追加できるように変更します。

左パネルに用意してある各ボタンがクリックされた場合に、新規Gridを画面中央に表示します。

それをドラッグして任意の位置に挿入することで、レイアウト追加が可能です。

Gridの移動に関する基本的な処理はBlockとほぼ同じです。

Gridの追加に必要な処理として、以下のような変更を行っています。

まずGridを構成するHTMLを、テンプレートとしてHTML内に用意します。

ここではscriptタグで囲んでいますが、今ならtemplateタグでもいいかもしれません。

<script type="text/template" id="le-grid-template-col1">

<div class="mdl-grid le-grid le-grid--1col">
<div class="mdl-cell mdl-cell--12-col">
<div class="le-block-edge"></div>
</div>
<div class="le-grid__menu">
<span class="le-grid__menu_id"></span>
<button class="mdl-button mdl-js-button mdl-button--icon le-grid-menu__delete">
<i class="material-icons">delete</i>
</button>
</div>
</div>
</script>

あわせて、html内に追加中オブジェクトの表示領域を用意します。

class="le-object_unplaced"のdivに対して、テンプレートを出力するようにしています。

            <div class="le-object_unplaced"></div>

</main>
</div>

次に追加ボタンのクリックイベントを用意します。ここでは


  • 上記テンプレートの取得

  • テンプレートに付与するためのidを生成(idはGridにマウスカーソルを合わせた際のガイドにも表示)

  • テンプレートの内容をhtmlに追加

  • pepの設定

を行っています。

$('.le-leftpanel-item__grid').on('click', function(e){

var $temp = $($($(this).attr('data-template')).text());
$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({
(中略)
});

ドラッグ中の処理はBlock移動の場合と同一です。ドロップ時もほぼ同様ですが、


  • Gridの配置先を選択Gridの下(inserAfter)とする

  • 背景の削除

  • pepのunbind(現時点では配置後の再移動は考慮していません)

  • スタイルの除去

  • 空であることを示すクラスの付与

を行っています。

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');
}

動作させるとこんな感じになります。

(わかりづらいですが、最初に3カラムグリッドボタンをクリックしています)

sample-3-01.gif


ブロックを追加できるようにする(sample-4)

Gridと同様に、Blockも追加できるように修正します。

といってもほぼGridと一緒ですので、ソースも流用となっています。

異なる点としては、


  • Blockは配置後も再移動できるようにするため、配置完了のタイミングで配置済みのすべてのBlockに対してpepのイベントを再バインドしている

となります。

細かい修正はありますが、割愛します。

ドラッグ&ドロップでコンテンツの配置を変えられるUIを作る (3)へ