JS memo

お洒落にJavaScript。

2019年3月18日0:18

jQuery UIでドロップした値を合計する(サンプルあり)

jQuery UIで任意のエリアにドロップされたものの値を取得し、除かれると値も除かれるようなアプリの作成方法を紹介します。

左のフルーツを右のボックスにドラッグしてみてください。

重さの合計:0 g
  1. 作成内容
  2. jQuery UIの使い方
  3. 作成手順
  4. まとめ

作成内容

上記のようなサンプルを作成します。アプリの内容です。

  • 任意の物体を任意のエリアにドラッグする
  • ドラッグした物体の固有値を取得し、計算して表示する
  • ドロップエリアから元の位置に戻すと計算された値から固有値が除かれる

jQuery UIを応用してネット食品のカロリーを見える化するアプリも作成してみたので、よければ参考にしてください。

カロリーの見える化

jQuery UIの使い方

始める前にjQuery UIの使い方を簡単に説明します。

jQuery UIとは

jQuery UIとはjQueryで書かれたjQueryの拡張機能のようなものです。

UIはユーザーインターフェイス(User Interface)の略で、より簡単に滑らかな動きを再現するなどのUIを向上するために作られました。

ドラッグとドロップの機能についてのメリットの一つはスマホに対応していることです。ネイティブjavascriptでもドラッグ&ドロップを実装することはできますが、スマホでは動きません。

またドロップする際にドロップエリアに指定されているcssに影響するので、動きがぎこちなくなりがちですが、jQuery UIはより滑らかな動きが再現できます。

今回はjQuery UIの機能の中でもドラッグとドロップを使うので、簡単に実装方法を紹介します。

jQueryとjQuery UIの読み込み

まずjQueryのソースを読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

次にjQuery UIのソースを読み込みます。

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="crossorigin="anonymous"></script>

スマホでも対応させたい場合は、さらにjQuery UI Touchのソースを読み込みます。

<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js'></script>

順番通りに読み込んでください。

javascriptのソース

最低限のドラッグ&ドロップを実装します。

// ドラッグさせたい要素
$(".drag-element").draggable();
// ドロップさせたい要素
$('#droparea').droppable();

これに様々なプロパティーを追記することでカスタマイズすることが可能です。

作成手順

では今回行いたい動作を作成していきます。jQueryのそれぞれのライブラリーは先に読み込んでおいてください。

htmlの記述

<div style="display:flex;">
  <div id="dragarea" style="width:50%;height:300px;">
    <div class="drag-element" style="width:100px;height:100px;color:#555;" value="100"></div>
  </div>
  <div id="droparea" style="width:50%;height:300px;border:dashed 1px #555;">
    <span>値:<span id="sum"></span></span>
  </div>
</div>

javascriptの記述

スクリプト内の記述です。

$(function(){
  // 表示させる合計の値
  let sum = 0;
  // ドラッグさせる要素の指定
  $(".drag-element").draggable();
  // ドロップさせるエリアの指定
  $("#droparea").droppable({
    // 値を取得する要素の指定
    accept:".drag-element",
    // 指定した要素がドロップされた時
    drop :function(event, ui){
      if( !ui.draggable.hasClass("choised") ){
        // 値を取得する
        let a = ui.draggable.attr('value');
        sum += Number(a);
        // 任意の場所に記載
        $("#sum").text(sum);
        // ドロップされている状態にする
        ui.draggable.addClass("choised");
      }
    }
  });
  $("#dragarea").droppable({
    // ドロップエリアにある要素を取得
    accept:".choised",
    drop :function(event, ui){
      // 要素取得
      let a = ui.draggable.attr('value');
      // 合計から値をマイナスする
      sum -= Number(a);
      // 再計算したものを任意の場所に記載
      $("#sum").text(sum);
      // ドロップ状態を初期値に戻す
      ui.draggable.removeClass("choised");
    }
  });
  // ドラッグの時にスクロールの動作をストップさせる
  $(".drag-element").on('touchmove',ontouchmove);
  function ontouchmove(e){
    if(e.cancelable)e.preventDefault();
  }
})

以下、javascriptの記述内容です。

  • ドラッグさせる要素を定義
  • ドロップエリアをエリア1:ドロップされたらvalueを取得、エリア2:元のドラッグ要素があるエリアを指定
  • エリア1にドラッグ要素がドロップされるとvalueを取得し、計算、任意の場所に表示
  • エリア1に再びドラッグ要素がもどされた時にvalueの値を計算からマイナスし、任意の場所に表示
  • ドラッグ時にページがスクロールしないように設定

上記で記述したサンプルです。

値:

まとめ

jQuery UIを使えば、ドラッグ&ドロップが簡単にスムーズに再現できます。

簡単なので、何か応用したい時も一工夫でできるので、また試してください。

お疲れ様でした!