アプリ版：「スタンプのみでお礼する」機能のリリースについて

急いでいます！

HTML5でファイルドラッグ＆ドロップに関する質問です。

締切済

  • 質問者：wetTissue_0
  • 質問日時：
  • 回答数：3件

下記サンプルで実装し、ドロップしたファイル名が画面に表示されましたが、
このファイル名の横に削除ボタンを付けて、押下した場合、ドロップしたファイルを削除するようにしたいです。
jqueryはあまく詳しくなくて、自分ではなかなかうまくできませんでした。
やりかたをご存じの方は、ご教示をお願い致します。

■HTMLソース
<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="js/common/filedrop.js"></script>
</head>
<body>
<div id="dropable">ファイルをここにドロップしてください。</div>
</body>
</html>

■jsソース
(function(global, $) {
"use strict";

var util = {
// ブラウザのデフォルトの動作と、イベントの伝播をキャンセルする
stop: function(e) {
e.preventDefault();
e.stopPropagation();
},
// strを指定の長さで切り取る
cutoff: function(str, len, tail) {
tail = tail || "";
return str.slice(0, len) + tail;
}
}
$(function() {
var $dropArea = $("#dropable");

// ドラッグ関連のイベントをすべてキャンセルして、ドロップイベントを設定
$dropArea.on({
"dragenter": util.stop,
"dragover": util.stop,
"dragleave": util.stop,
"drop": function(e) {
util.stop(e);

// filesはargumentsのようなオブジェクトなので配列に変換
var tmp = e.originalEvent.dataTransfer.files,
files = Array.prototype.slice.call(tmp, 0, tmp.length);

files.forEach(function(file) {
var reader = new FileReader();

// 読み込みが完了した時のイベントを設定
$(reader).one('load', function(e) {
var fn = "ドロップされたファイル名：" + file.name,
msg = [fn].join("\n");

$dropArea.append( $("<pre></pre>").text(msg) );
});

// ファイルをテキストとして読み込む
reader.readAsText(file);
});
}
});
});
}(this, jQuery));

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3

  • 回答者： karamarimo
  • 回答日時：

補足


preタグはデフォルトでスタイルが display:block なので、右横にbuttonを表示するために inline にしました。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： karamarimo
  • 回答日時：

ドロップした項目の横に削除ボタンを表示して、それを押すとその項目(DOM element)がdocumentから削除されるということでよろしいでしょうか。



そのサンプルを改変してやってみました。
https://jsfiddle.net/3k8gLw06/

項目ごとに、divタグの中にpreタグとbuttonタグを作り、buttonのclick時にそのparentつまりdivをremoveすることでchild要素も削除されます。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yambejp
  • 回答日時：

ユーザーがファイルをつかめる状態なのだから


わざわざブラウザ上から削除なんてさせずに
ユーザー自ら削除すればいいだけなので
命題は誤動作によるトラブルばかり助長する不要なUIだと思います
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報