drag-drop - HTML5のドラッグ&ドロップAPIをごく簡単に扱う
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5で便利になった機能の一つにファイルのドラッグ&ドロップがあります。Webブラウザ上にファイルをドロップしてアップロードしたり、DOMをドラッグ&ドロップできたりします。しかしできるとは言ってもコードをそれなりに書かないと使えないのが難点です。 そこで使ってみたいのがdrag-dropです。HTML5のドラッグ&ドロップを手軽に実装できるようにします。 drag-dropの使い方 drag-dropのコードです。onDrop/onDropTextメソッドを定義するだけでファイルやテキストデータが取得できます。 window.remove = DragDrop('body', { onDrop: function (files, pos) { var names = file
Draggabilly
Type: Selector String, Array, HTMLElement // select all .handle children with selector string handle: '.handle' // set as element handle: element.querySelector('.handle') // set as array or NodeList handle: [ element.querySelector('.handle1'), element.querySelector('.handle2') ] Specifies on what element the drag interaction starts. handle is useful for when you do not want all inner elements to b
動画ファイルをドラッグ＆ドロップして変換できるオープンソースソフト「Mobile Media Converter」
AMR・3GP・MP3・WMA・MP4・AVI・WMV・MOVの形式に変換することができるオープンソースソフトが「Mobile Media Converter」です。YouTubeの動画をダウンロードすることも可能で、Windows、Ubuntu、Mac OS Xに対応しています。 ダウンロードから操作方法までについては以下から。 Mobile Media Converter - Download http://www.miksoft.net/mobileMediaConverterDown.htm 今回はWindowsにインストールするので、上記サイトにある「Download for Windows」をクリック。 ダウンロードしたインストーラーを実行。 「Next」をクリック 「Next」をクリック 「Next」をクリック 「Next」をクリック 「Install」をクリック 「Fini
複雑な条件の画像リサイズがドラッグ＆ドロップで完了、事前に4つの設定を保存して組み合わせ可能な「VarieDrop」
4つのリサイズ設定が保存できるので、決まった処理をする場合に設定変更をする手間が省くことができ、操作はドラッグ＆ドロップで簡単に実行できるフリーソフトが「VarieDrop」です。出力フォーマットはGIF・BMP・PNG・JPEG・GIF・TIFFで、Windows XP・Vista・7・8上で起動可能となっています。 ダウンロード、インストール、設定・操作方法については以下から。 Software - Vieas Web http://www.vieas.com/en/soft.html 上記サイト中段のVarieDrop項目にある「EXE」をクリック。「ZIP」も選択できます。 ダウンロードしたインストーラーを実行。 「OK」をクリック 「次へ」をクリック 上にチェックを入れて、「次へ」をクリック 「次へ」をクリック 「次へ」をクリック 「次へ」をクリック 「インストール」をクリック
タッチデバイスで要素を回転させたりリサイズ、ドラッグによる移動を可能にするスクリプト・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
数値だけでなく、日付や時刻にも対応したスライダー・jQRangeSlider
D&Dで操作するスライダーを実装するjQuery依存のスクリプトです。数値のものが多いですが、こちらは日付や時刻などにも対応しています。使うシーンは多くは無いかもですけど、便利そうです。 日付にも対応のスライダーです。※ピッカーではありません
FTP・WebDAVをWindowsのローカルドライブとして扱えるフリーソフト「NetDrive」
接続したFTP・WebDAVサーバーをローカルドライブとして扱うことができ、エクスプローラーなどからファイル・フォルダーをドラッグ＆ドロップで移動させることができるフリーソフトが「NetDrive」です。SSLに対応し、Windows XP・Vista・7・Server 2003・Server 2008上で起動可能となっています。 ダウンロード、インストール、設定操作方法については以下から。 NetDrive - Download NetDrive http://www.netdrive.net/download.html 上記サイトの「Download」をクリック。 ダウンロードしたインストーラーを実行。 「I Agree」をクリック 「Next」をクリック 「Install」をクリック 「Next」をクリック 「Finish」をクリック インストールが完了すると操作画面が表示されます。
タッチデバイスで要素をスムーズに回転させるjQueryプラグイン・Touchy
タッチイベントによるホイール スクロール等を可能にするjQuery のプラグイン。ラッチ（ｶﾁｶﾁ感） の無い、慣性ホイールスクロール も実装可能です。ドラッグや フリックなども対応してるみたい。 ラッチの無い慣性ホイールスクロールをタッチデバイスで実装出来る、というスクリプト。タイトルはアレですが、そのほかスワイプなどにも対応しています。 慣性ホイールスクロールを可能にするライブラリ。それ以外のタッチイベントにも対応していますが、特にホイール操作が気持ちよかったです。 以下サンプル。※タッチデバイスのみで動作します。 Sample コード<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="jquery.touchy.js"></script
slideControl.js jQuery Plugin
The Code In Your <head> <link rel="stylesheet" type="text/css" href="slideControl.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script type="text/javascript" src="jquery.slideControl.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.slideControl').slideControl(); }); </script> Options speed: Co
FileDrop.js - self-contained cross-browser HTML5, legacy, AJAX, drag & drop JavaScript file upload
Preface Features: No JS dependencies, Flash or Java applets900 lines of code, 1300 lines of comments18 KiB minified, 6 KiB gzippedHTML5, drag & drop for modern browsersIFrame fallback for legacy agents (IE 6+)Flexible event system with over 15 callbacksMultiple independent FileDrops on one pageReady for jQuery, PHP, ASP.net and others600+ lines of unit tests (tests.html) Internet Explorer only sup
ドラッグしたテキストで辞書検索出来るようにするjQueryプラグイン・Wordsmith
テキストをドラッグすると アイコンが表示されて、ク リックすると辞書サイト等 で検索結果を表示する、と いうjQueryプラグインです。 用途は多くは無いかもしれませんけど、ちょっと面白かったので備忘録。ドラッグしたテキストに任意のサイトで検索結果を表示するリンクを表示させる、というもの。 動作サンプル見たほうが早そうですね。サンプルはGoo辞書で検索出来るように、アイコンは任意の画像に変更して有ります。 確認出来ましたでしょうか。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script type='text/javascript' src='wordsmith.js'></script>コアとプラグイン
Creating a Complete HTML5 Drag and Drop File Uploader with jQuery
Today we’re going to be creating a file uploader using HTML5 drag and drop, along with the file reader API and some PHP. We’ll also be using local storage to remember which files were uploaded by the user. Getting Started For this tutorial I’m using jQuery and an icon font called symbolset. If you don’t want to get symbolset you could use an alternative or just not use a symbol font all together!
jQuery Zoom
A plugin to enlarge images on touch, click, or mouseover. Demo Hover Grab Released under the MIT License, source on Github (changelog) Download Compatible with: jQuery 1.7+ in Chrome, Firefox, Safari, Opera, Internet Explorer 7+. Install via NPM npm install jquery-zoom Instructions Zoom appends html inside the element it is assigned to, so that element has to be able to accept html, like <a>, <spa
ネストされたリストにも対応のドラッグ&ドロップによる要素の入れ替えを可能にするjQueryプラグイン・Nestable
入れ子のリストにも対応した、 ドラッグ&ドロップによるソート 可能なjQueryプラグインの ご紹介。jQuery UIを使うほど でも無いような時はこういう のあると嬉しいですね。 ネスとされたリストのソートをドラッグ&ドロップで可能にするjQueryプラグインです。非圧縮で13KBほど。うまくキャプチャ撮れなかったですけど、iPhoneでも動きました。 ネスとされたリストでもドラッグ&ドロップでソート可能です。勿論、孫要素から子要素に移動させる事も出来ます。 WordPressのカスタムメニューを触ったことがある方ならピンと来るかもしれないですね。WPではjquery-ui-draggableを使用していますが、こちらはjQueryUI無しで動きます。 親要素や子要素はその下層要素を格納できます。 コード<script src="http://ajax.googleapis.com/a
YouTube人気急上昇
【ゆっくり実況】パトカーを進化させていくバカゲー！？最高級の車にする！！パトカーの進化がすごすぎるゲームをやりこんだらヤバすぎた…！！【 Super Car 3D 】【たくっち】
jquery.pep.js | kinetic drag for mobile & desktop
jquery.pep.js is a lightweight jQuery plugin which turns any DOM element into a draggable object. It works across mostly all browsers, from old to new, from touch to click. I built it to serve a need in which jQuery UI’s draggable was not fulfilling, since it didn’t work on touch devices (without some hackery). All of Pep’s options are outlined on Github, so take a look. Feel free to email me with
スマフォのフリックにも対応しているカルーセルを実装できるJSライブラリ・inflickity
フリックに対応したカルーセルを 実装するライブラリ・inflickity です。動きもかなり軽快ですので、 使いどころも多々ありそうです。 よくあるUIキットにも似たような ものが含まれてますけど、こうして 単体で使えるのも欲しいところです。 永久にフリックできるカルーセル、みたいなのを作れるライブラリです。 PCではドラッグで操作できます。 スマフォはフリックで動かせます。と言ってもiPhoneでしかテストしてませんが。 Sample以下サンプル。スマフォはQRからどうぞ。 Sample 斜めのと混同してて操作はしにくくなっていますがその点はご了承下さい。 コード<script src="inflickity.js"></script> <script> var init = function() { var slider1 = document.getElementById('slid
[JS]ページ上のコンテンツを指定エリア内でレイアウト変更可能にするスクリプト
リストのアイテムやサイドバーの各コンテンツなど、ページ上のコンテンツをドラッグ&ドロップで移動し、それをクッキーに保存するjQueryのチュートリアルを紹介します。 jQuery: Customizable layout using drag and drop [ad#ad-2] デモ 実装 デモ デモでは簡単なリストのアイテムの順番変更からページのレイアウト変更まで、ドラッグ&ドロップで移動が可能です。 demo1からdemo3は、レイアウト変更までのステップという感じです。 demo 3: Implementation in a real design 最終的には、ページ内の指定コンテンツが指定エリア内で移動が可能で、その内容をクッキーに保存します。 例：打ち出しエリアの3つのコンテンツ、サイドバーのコンテンツ 実装 外部ファイル 実装に使用するスクリプトは「jquery.js」「jQ
地図にマッピングし、指定した位置にコンテンツを表示出来る軽量jQueryプラグイン・CRAFTMAP
使いやすそうだったので備忘録。 Googleマップライクに動かせて マーキング、その場にコンテンツ を表示させる事も可能な軽量 jQueryプラグイン・CRAFTMAPです。 ちょっと説明下手ですね・・ マーキングもデザインのカスタマイズも割と楽で色々なものに応用できそうです。商用は有料なのですが、もしかしたら使うかも。 メニューから選択するだけでなく、ドラッグ可能でマーカーをクリックすることでもスクロールしてくれます。地図コンテンツでたまに見かけるインターフェースですね。 特にGoogle Map API等は使用していません。シンプルに、地図の画像を作って、座標に応じてマーカーを設置する、というものです。ライブラリも軽量ですよ。 サンプル作ったのでどうぞ。 Sample コード<script type='text/javascript' src='https://ajax.googlea
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressのアイキャッチ画像をドラッグ&ドロップで設定出来るプラグイン・Drag & Drop Featured Image
