JavaScriptプログラミング講座【ドラッグアンドドロップについて】
<html> <body> <a id="aaa" href="http://example.com" >このリンクをドラッグ！！</a> <script type="text/javascript"> <!-- // ------------------------------------------------------------ // "aaa" という ID 属性のエレメントを取得する // ------------------------------------------------------------ var element = document.getElementById("aaa"); // ------------------------------------------------------------ // ドラッグ開始時に実行される関数 // ---
UWPでファイルのドロップをしたい - かずきのBlog@hatena
以下のような感じでいけます。 まず、ドロップのターゲットにAllowDropプロパティをTrueにします。そしてDropOverイベントでドロップされたときの見た目を調整したりします。そして、Dropイベントで、イベント引数のDataViewプロパティのContainsメソッドでドロップされたコンテンツを確認して処理をします。 例えば画面の左半分にドロップされたファイルの名前のリストを、画面の右半分に置いたListViewに表示する場合は以下のようなコードになります。 <Page x:Class="App35.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local
UWP エクスプローラからのドラッグ＆ドロップ - ideaki's blog
channel9.msdn.com ユーザーは待っていたドラッグアンドドロップ UWP App ファイルエクスプローラからのドラックアンドドロップアンドオープン https://t.co/dNrOyZhmEm— くコ:彡@衰退期 (@ideaki19) 2015, 5月 3 したサンプル <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" AllowDrop="True" DragOver="Grid_DragOver"Drop="Grid_Drop"> <TextBlock x:Name="AATextBlock" FontFamily="MS PGothic" Text="Drag & Drop Text File" VerticalAlignment="Center" Horizonta
Drag and Dropでファイルを簡単にアップロードできるコンテンツを作れるDropzone.js - WebDelog
dropzonejs.com 2014月7月1日: dropzone.js のバージョンが上がり、以前の記事の内容では動作しないものが多くなっていたため、2014年7月1日時点での最新版 3.10.2 の仕様にあわせて記事内容を見直し、改訂しています。(更新が遅くなってしまってすみません。) サポートしているブラウザは Chrome 7+ Firefox 4+ IE 10+ Opera 12+ (Mac版のOperaではバグがあるため現在は無効のようです) Safari 5+ となっています。 ドラッグアンドドロップが利用できないブラウザのためには、 クリックするとinput:fileで表示されるファイル選択ウィンドウを表示させたり、 動作しなかったときの処理を書いて対応することが可能となっています。 動作方法 まず実際に動かしてみましょう。 事前にdropzoneを下記よりダウンロードし
HTML5 の File API でドラッグ＆ドロップする | TECHSCORE BLOG | TECHSCORE BLOG
こんちには、鈴木です。 HTML5 には File API というものがあます。 File API を使うとローカル PC からブラウザにドラッグ＆ドロップされたファイルを扱うことができます。 ということで、今回は File API によるドラッグ＆ドロップ処理をご紹介します。 まずは以下の HTML から始めましょう！ <!DOCTYPE html> <html> <head> <title>HTML5 でドラッグ＆ドロップ</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> $(function() { // TODO ここにドラッグ＆ドロップに必要な処理を記述します. }); </script> </head> <body> <
HTML5 の Drag and Drop API と File API を使ってファイルアップロードを実装する - しばやん雑記
HTML5 の Drag and Drop API を使うことで、ブラウザにドロップされたファイルの情報を扱うことが出来ます。そして File API を組み合わせることで、ファイルの中身まで扱うことが出来るようになります。 そして FormData オブジェクトと XHR を組み合わせることでアップロード処理までを実装することが出来ます。完成図はこんな感じです。 今回は JavaScript の処理が中心です。jQuery を使っているので追加してくださいね。 $(function () { var uploadFiles = function (files) { // FormData オブジェクトを用意 var fd = new FormData(); // ファイル情報を追加する for (var i = 0; i < files.length; i++) { fd.append(
ドラッグ＆ドロップでファイルをアップできるHTML5のデモ:phpspot開発日誌
Creating a Complete HTML5 Drag and Drop File Uploader with jQuery | InsertHTML ドラッグ＆ドロップでファイルをアップできるHTML5のデモ。 デスクトップなどからファイルをブラウザにドロップしてサムネイルを表示→ボタンを押下でアップロード実施というインタフェースのアップローダ実装デモです。 ソースをDLしてそのまま使うことも可能です。 ドロップするとサムネイルと共にボタンが表示されます。 ボタンを押すとファイルがアップロードされます。 使い慣れるといちいちダイアログからファイルを選ぶのが馬鹿らしくなりますね。 サンプルにはPHPスクリプトもおまけでついてきますが、値をValidateしていなかったりするため、実際に利用するには注意が必要そうです。 関連エントリ これは必見のWEBデザインの近未来。HTML5で構築
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ドラッグ アンド ドロップ - UWP app developer | Microsoft Docs