ドラッグ＆ドロップ – 東京発、雲に乗って

JavaScriptのライブラリ「SortableJS」を使えば
ドラッグ＆ドロップでリストの並び順を変えたりウィンドウの配置を入れ替えたり
といったUIをとても簡単に作ることができます。

SortableJS

デモ：

１．りんご

２．いちご

３．バナナ

４．スイカ

５．佐藤太郎

コード：

<div id="sort_demo1">
<div style="background-color:#ffc0c0;">１．りんご</div>
<div style="background-color:#ffffc0;">２．いちご</div>
<div style="background-color:#c0ffc0;">３．バナナ</div>
<div style="background-color:#c0ffff;">４．スイカ</div>
<div style="background-color:#c0c0ff;">５．佐藤太郎</div>
</div>

<style>
#sort_demo1 div {
  cursor: pointer;
  margin: 2px;
}
</style>

<script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
<script>
window.onload = function() {
  Sortable.create(sort_demo1, {
    sort: 1,
    group: {
      name: 'sort_demo1',
      pull: true,
      put: true
    },
    animation: 150,
    onEnd: function(evt) {
      // ここで並び変えた状態を変数に保持したり、サーバーに送信したりする
    }
  });
}
</script>

</div>

<style>

#sort_demo1 div {

cursor: pointer;

margin: 2px;

}

</style>

window.onload = function() {

Sortable.create(sort_demo1, {

sort: 1,

group: {

name: 'sort_demo1',

pull: true,

put: true

animation: 150,

onEnd: function(evt) {

// ここで並び変えた状態を変数に保持したり、サーバーに送信したりする

}

});

}

</script>

複数のファイルをドラッグ＆ドロップで一気にアップロードするページ、
実はけっこう簡単に作れます。Ajaxを使えばページ遷移も不要です。
（一部jQueryを使用しています）

まずはHTML側にドロップさせる場所を作ります。

<div id="upload_area">
<div id="drop_area" style="background-color:#f0f0f0;width:100%;height:200px;padding:10px;border:2px solid #808080;border-radius:5px;" ondragover="dragover(event);" ondrop="drop(event);">
この枠内にファイルをドラッグ＆ドロップしてください。
<br/>
複数のファイルを選択すれば一度にアップロードできます。
</div>
</div>

この枠内にファイルをドラッグ＆ドロップしてください。

<br/>

複数のファイルを選択すれば一度にアップロードできます。

</div>

ドラッグ時とドロップ時には関数を呼ぶようにしておきます。

次にその関数をJavaScriptで定義します。

ドラッグ中にブラウザの機能をキャンセルさせます。

var dragover = function(e) {
  e.preventDefault();
};

var dragover = function(e) {

e.preventDefault();

};

ドロップされたらファイルを取り出してアップロード関数を呼びます。

var upload_cnt = 0;
var drop = function(e) {
  // ブラウザの機能をキャンセルします
  e.preventDefault();

  // ファイルを取り出します
  var files = e.dataTransfer.files;
  upload_cnt = 0;
  file_num = files.length;

  // 1件ずつアップロード関数を呼びます
  for (var i = 0; i < files.length; i++) {
    ajax_upload(files[i]);
  }
};

var upload_cnt = 0;

var drop = function(e) {

// ブラウザの機能をキャンセルします

e.preventDefault();

// ファイルを取り出します

var files = e.dataTransfer.files;

upload_cnt = 0;

file_num = files.length;

// 1件ずつアップロード関数を呼びます

for (var i = 0; i < files.length; i++) {

ajax_upload(files[i]);

}

};

アップロード関数です。
（エラー処理などは割愛し要点だけ簡単に記述します）

var ajax_upload = function(file) {
  var form_data = new FormData();
  form_data.append('file', file);
  var func = function() {
    upload_cnt++;
    if(file_num == upload_cnt) {
      alert('アップロードが完了しました');
    }
  };
  $.ajax({
    type: 'POST',
    url: '（アップロード処理を行うサーバー側のURL）',
    data: form_data,
    success: func
  });
};

var ajax_upload = function(file) {

var form_data = new FormData();

form_data.append('file', file);

var func = function() {

upload_cnt++;

if(file_num == upload_cnt) {

alert('アップロードが完了しました');

}

};

$.ajax({

type: 'POST',

url: '（アップロード処理を行うサーバー側のURL）',

data: form_data,

success: func

});

};

対応していないブラウザのための処理をロード時に呼びましょう。

if(!window.File) {
  $('upload_area').html('対応していません');
}

if(!window.File) {

$('upload_area').html('対応していません');

}

タグ: ドラッグ＆ドロップ

【JavaScript】SortableJSで簡単に並べ替えUIを作る

【JavaScript】ドラッグ＆ドロップで複数ファイルの一括アップロード