⚔ kendoとの出会い ⚔
茶番が嫌いな方は次リンクで本編へどうぞ kendo-angular-ui紹介
要素を自由自在に入れかえたい！
どうやればいいだろう？
どうやらjQueryを入れればいいらしい・・・
bootstrapみたいにインストールするのか。よし
npm install jquery –save いけぇぇぇぇぇぇーーーーーーー
import * as $ from ‘jquery’;で読み込めるっぽい
なんで？
よしじゃあ、次はインデックスに入れてみよう！
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/〇〇/jquery.min.js”></script>
こんどはいくっしょ
は？
どうやらjqueryにはこうやれ的なお手本がなく、みんな苦労して無理やり入れているみたいだ😖😖😖😖😖😖😖😖😖😖😖😖😖😖😖😖😖😖😖😖
初心者にはどうしようもできないやつだぁぁぁぁ
これまで、人が「こうすればいいよ」という情報を元にやっていたので、情報が無いなら諦めるしか無いのか・・・・・・・・・・・
・
・
・
・
【jQueryUIを使わずにドラッグ＆ドロップを実装したい】Javascriptライブラリ「Sortable」を使ってみた – Qiita
そ、そんなことができるのか
「デモページ」がある見てみよ
Благодарю вас!
下にスクロールしてみる・・・・・・
そこにはAngularの文字が！！！！！
Angularへの導入方法がありそうだ😍😍
でもJSのみ対応の可能性も・・・
まだだ、絶対にあるはずだ。
Angular5はアップデートばっかりで不安定だから最新のやつの対応が少ないけど、
これまでなんやかんややってきたじゃないか。。。。。
🕐🕑🕒🕓🕔🕕🕖🕗🕘🕙🕚🕛🕐🕑🕒🕓🕔🕕🕖🕗🕘🕙🕚🕛🕐🕑🕒🕓🕔🕕🕖🕗🕘🕙🕛🕚🕐🕑🕒🕓🕔🕕🕖🕗🕘🕙🕚🕛
ng-sortable angular2で検索してみよ
ん？
Kendo UI for Angular – Telerik
kendo?なんやそれ
Sortable Overview – Components – Kendo UI for Angular
うぉぉおおおおおおおおおおおおおおおおおおおおぉぉ
CODE SAMPLEをコピペしてデモページ作ったぞ。htmlとcssの書き方が独特で、まんまコピペはできなかったけど。それ以外は何も苦労なくエラーもなし。すんなり。有能剣道
すごいぞ⚔剣道⚔
他にもいろいろできるようなライブラリがあるみたいだ。
でもなんで剣道？日本人がやってんのかな？
結構、オフィス構えたでかいとこみたいだ。なら日本もあるだろう・・・
？＿？
なぜ剣道なのか？そんな疑問を抱えながら剣道にお世話になるのだろう・・・
以上、kendoとの出会いでした。御粗末
kendo-angular-ui
茶番回避組のための剣道紹介
剣道公式、要素入れ替え紹介ページ
Sortable Overview – Components – Kendo UI for Angular
紹介をもとに作ったデモページ
初心者でも実装できる剣道様ありがとう。
インストール
次のコマンドを入力します。
完了したら、app-moduleに次のコード加えます。
import { SortableModule } from ‘@progress/kendo-angular-sortable’;
さらに、@NgModule.importsに加えれば使えるようになります。
では、コードの中身を見ていきましょう。
コード解説
シンプルなタイルを入れ替えるやつを見ていきます。
固定化は一旦置いておいて、どうして動くのか？配列もどうして変わるのかをまず見ます。
Sortable
まず、コンポーネントプロパティの見慣れないコードから見ていきます。
encapsulation
カプセル化というコンポーネントプロパティの一つのようです。
Angular – Component Styles（以下リンク先和訳）
コンポーネントのCSSスタイルはコンポーネントの毎にカプセル化され、他のアプリケーションには影響しません。
encapsulationプロパティを指定することでカプセル化をコンポーネント毎にどのように行われるかを制御することができます。各モードについて説明します。
encapsulation: ViewEncapsulation.Native
和訳不能😰
encapsulation: ViewEncapsulation.Emulated
和訳不能😰
encapsulation: ViewEncapsulation.None
Noneは、Angularがコンポーネント内でカプセル化しないことを意味します。 AngularはCSSをグローバルスタイルに追加します。つまり、コンポーネントのスタイルをHTMLに貼り付けるのと本質的に同じことになります。
<kendo-sortable＞にはグローバルスタイルを
入れかえ要素の生成は次のタグを使います。
これを使ってしまうと、クラススタイルをカプセル化できなくなるようです。
例えば、カプセル化したクラススタイルは次のようになります。
しかし、<kendo-sortable＞を使うと、コンポーネント別のクラスとしてタグを生成できないようです。
シンプルに.itemと生成されます。
ng-bootstrapを使ったときにも同じようなことがありましたが、おそらくカプセル化は難しいのでしょう。
つまり、CSSスタイルはカプセル化せずにグローバルスタイルとして定義しないとCSSが適応されないことになります。
そのため、<kendo-sortable＞タグ内のクラスのCSS指定はグローバルスタイルにする必要があります。
だから、encapsulationはnoneにする必要があります。
カプセル化を無効にすればそのコンポーネントCSSがグローバルスタイルになります。
配列作成
次のコードで入れ替えをする配列を用意します。
文字配列定義をして、空配列とします。
パブリック指定しなくても良い気がします。
items配列
コンストラクタ内で、items配列に文字列を格納します。
for文を使って、指定のアイテム分の文字列を格納します。
今回は20個のアイテムを作りました。
for (let i = 0; i < 20; i++) {this.items[i] = ‘Item ‘ + i}
}
TSファイルのコードはこのように簡単な配列作成だけになります。
次にHTMLを見ていきます。
kendo-sortableプロパティ
<kendo-sortable></kendo-sortable>内に入れ替え可能要素を生成します。
そのために、kendo-sortableプロパティを設定します。
SortableComponent – Sortable API – Kendo UI for Angular