Vue.jsのリストレンダリングとhtml5のドラッグ＆ドロップの実装 - Qiitaこの記事は vue.js v1.x でのみ動作確認済みです。 v2.x では orderBy など動作しない記述がございますので、ご注意ください。 公式サイトではmousedownやtouchstartなどのイベントをトリガーに実装したサンプルがあります。これをうまく使えばドラッグ＆ドロップの実装もできそうですが、今回はhtml5のdraggableを使用してみました。
React Grid Layout - React用のグリッドシステム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Reactを本格的に使っていく上では多くのコンポーネントが必要になります。その基礎となるのがグリッドではないでしょうか。グリッドが作れれば、その中にコンテンツを配置して整理されたレイアウトが作れるようになります。 今回紹介するのはReact Grid Layout、React用のグリッドレイアウトシステムです。ドラッグ&ドロップやリサイズにも対応しています。 React Grid Layoutの使い方 実際に使っているところです。ドラッグで移動したり、大きさの変更ができます。スタティックとして移動できないように指定することもできます。 さらにフリーレイアウトとして重ならないけれど縦の配置は自由と言ったレイアウトも作れます。 この他、配置情報をlocalStorageに保存しておいて
オブジェクトのドラッグ移動を実現するJavaScriptライブラリ·Pep MOONGIFT
Pepはデスクトップ/スマートフォンの両方で動作するドラッグライブラリです。 ゲームなどでWebブラウザ上のオブジェクトをドラッグアンドドロップしたりする操作はよくありますが、その操作をデスクトップとモバイル両方に対応させたのがPepです。 使い方は簡単でDOMに対してpep()を実行するだけ。 ドラッグで移動させられます。 枠の中だけでの移動もその逆もできます。 コールバック対応です。 スライダーを動かすと大きさが変わるデモ。 X軸、Y軸を固定にすることもできます。 こちらはiPhoneで試した所。動きに慣性があるのが特徴です。 Webブラウザ上のオブジェクトを動かすという操作は通常のWebサイトではあまりない動作なので面白いです。またデスクトップとスマートフォン両方に対応しているので使い勝手が良いのではないでしょうか。 PepはJavaScript製、MIT Licenseのオープンソ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
