「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove
[JS]タッチデバイス対応、ミニマルなデザインながら高機能なスライダーを実装するスクリプト -Iory
デモページ：Custom Easings イージングのエフェクトをカスタマイズしたデモ。 Ioryの使い方 Step 1: HTML HTMLはシンプルで、各パネルをリスト要素で実装し、divで内包します。 <div class="slider js_simple simple"> <div class="frame js_frame"> <ul class="slides js_slides"> <li class="js_slide">1</li> <li class="js_slide">2</li> <li class="js_slide">3</li> <li class="js_slide">4</li> <li class="js_slide">5</li> <li class="js_slide">6</li> </ul> </div> </div> Step 2: CSS
![[JS]タッチデバイス対応、ミニマルなデザインながら高機能なスライダーを実装するスクリプト -Iory](https://cdn-ak-scissors.b.st-hatena.com/image/square/f1cb6498582cf16c5feffd074f068f12f4d958a9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015040901.png)
[JS]スマホ・タブレットでの操作性を重視したタッチデバイス対応のさまざまなスライダーを実装できるスクリプト -Swiper
iOS/Androidなど、モバイル向けのWebサイト、Webアプリ、ネイティブアプリでの利用に最適化されたタッチデバイス対応のスライダーを実装できるスクリプトを紹介します。 キーボード操作やマウスのホイール・ドラッグ操作にも対応しているので、デスクトップでもOK！ Swiper Swiper -GitHub Swiperの特徴 Swiperのデモ Swiperの使い方 Swiperの特徴 ライブラリに依存しない Swiperは他のスクリプトのライブラリに依存せず、軽量で速く動作するスクリプトです。 jQuery, Zetro, jQuery Mibileなどの他のライブラリと一緒に使う時も安全です。 タッチの動きをそのまま デフォルトの設定でタッチの動きを「1:1」でインタラクションとして提供できます。 豊富なオプション ページネーション・ナビゲーションボタン・パララックスエフェクトなど
![[JS]スマホ・タブレットでの操作性を重視したタッチデバイス対応のさまざまなスライダーを実装できるスクリプト -Swiper](https://cdn-ak-scissors.b.st-hatena.com/image/square/cacff14f89d3ccb1fc0c8101d8047f5b3b8b070e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015030201.png)
[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity
デモページ: ナビゲーション Flickityの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 ※jQueryのプラグインとして利用する時は、jquery.jsを加えます。 <head> ... <link rel="stylesheet" href="/path/to/flickity.css" media="screen"> <script src="/path/to/flickity.pkgd.min.js"></script> </head> Step 2: HTML 各スライドをdiv要素などで実装し、ラッパーで内包します。 <div id="main-gallery"> <div class="gallery-cell">...</div> <div class="gallery-cell">...</div> <div cl
![[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity](https://cdn-ak-scissors.b.st-hatena.com/image/square/bf5475b2160c621bb7e866a6e614ec3326ad2769/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015012901.png)
タッチデバイスにも対応の、要素をドラッグ&ドロップでソートできる軽量スクリプト・Sortable
要素をソートできるスクリプトのご紹介。タッチデバイスにも対応しており、軽量で非依存型となっています。なかなか便利そうですね。 D&Dでソートできるスクリプトです。HTML5のAPIを使用しているみたいですね。タッチデバイスでも動作します。 D&Dでどーと出来るスクリプト。jQuery等のライブラリに依存せず、圧縮版では2KBほどと軽量なのも素敵ですね。 <script src="Sortable.js"></script>本ライブラリを読み込むだけで利用できます。 var foo = document.getElementById("foo"); new Sortable(foo, { group: "bar" });グルーピングされた要素等にも対応できます。 ライセンスはMITとなっております。詳細は以下よりどうぞ。 Sortable
タッチデバイスで要素を回転させたりリサイズ、ドラッグによる移動を可能にするスクリプト・Touch-box
タッチデバイスで要素の回転やリサイズ、ドラッグ移動等を可能にするためのスクリプト、Touch-boxのご紹介です。シンプルでいい感じでした、iOSでしかテストしていませんが・・ タッチデバイス、と書きましたが、僕自身はiOSでしかテストしていませんので他デバイスで動かなかったらごめんなさい。 上記右側がiOSでのスクショです。要素をダブルタップするとズームするので、そのまま要素の回転やリサイズを行えます。ドラッグは普通に動かすだけ。 コード<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.touch_box.js"></script>jQuery依存なのでコアとスクリプトを読み込みます。 <img src="foo.jpg" class="t
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ItemSlide.js Moved to a new domain
