HTML5からドラッグ＆ドロップAPIが登場した。 これまでjQueryを使わないとできなかったが、HTML5でもできるようになったのでさっそく使ってみた。 操作は次のHTMLで画像一覧の画像をカートに移すことを試してみた。 ドラッグ＆ドロップAPIの仕様 HTML

<h2>画像一覧</h2>
<div id="goods">
</div>
<h2>カート</h2>
<div id="cart">
</div>
<form class="add">
  <input type="button" id="save" value="保存">
  <input type="button" id="restore" value="復元">
  <input type="button" id="clear" value="削除">
</form>

JavaScript

var imglist = {
 'b1':'<img id="b1" src="http://sample.com/img2/pic/photo01_thumb.jpg" draggable="true">',
 'b2':'<img id="b2" src="http://sample.com/img2/pic/photo02_thumb.jpg" draggable="true">',
 'b3':'<img id="b3" src="http://sample.com/img2/pic/photo03_thumb.jpg" draggable="true">'
};
jQuery(function($){
  var base = [];
  imginit();
  $('#save').click(save_module);
  $('#restore').click(restore_module);
  $('#clear').click(clear_module);

  /***********    画像一覧側の処理    ***************/
  // 画像一覧のdiv要素にdragenterイベントのリスナーをセット
  var goods = document.querySelector('#goods');
  goods.addEventListener("dragenter",function(event){
    // ディフォルト・アクションをキャンセル
    event.preventDefault();
  },false);
  // 画像一覧のdiv要素にdragoverイベントのリスナーをセット
  goods.addEventListener("dragover",function(event){
    // ディフォルト・アクションをキャンセル
    event.preventDefault();
  },false);
  // 画像一覧のdiv要素にdropイベントのリスナーをセット
  goods.addEventListener("drop",function(event){
    // データ転送により送られたきたデータ
    var id = event.dataTransfer.getData("text");
     // ドロップされたimg要素
    var elm = document.getElementById(id);
    goods.appendChild(elm); 
    // ディフォルト・アクションをキャンセル
    event.preventDefault(); 
  },false);

  /************    カート側の処理     ************/
  // カートのdiv要素にdragenterイベントのリスナーをセット
  var cart = document.querySelector('#cart');
  cart.addEventListener("dragenter",function(event){
    // ディフォルト・アクションをキャンセル
    event.preventDefault();
  },false);
  // カートのdiv要素にdragoverイベントのリスナーをセット
  cart.addEventListener("dragover",function(event){
    // ディフォルト・アクションをキャンセル
    event.preventDefault();
  },false);
  // カートのdiv要素にdropイベントのリスナーをセット
  cart.addEventListener("drop",function(event){
    // データ転送により送られたきたデータ
    var id = event.dataTransfer.getData("text");
     // ドロップされたimg要素
    var elm = document.getElementById(id);
    cart.appendChild(elm); 
    // ディフォルト・アクションをキャンセル
    event.preventDefault(); 
  },false); 

  function imginit(){
    /*  画像一覧に画像を追加する */
    var goodsdiv = $('#goods');
    $.each(imglist,function(idx,txt){
      var elment = $(txt);
      // jQuery要素をimg要素に変換
      dragstartlis(elment);
      // #goodsに追加する
      goodsdiv.append(elment);
    });
  }

  function dragstartlis(elment){
    // jQuery要素をDom要素に変換
    var img = elment[0];
    // img要素にdragstartイベントのリスナーをセット
    img.addEventListener("dragstart",function(event){
      // データ転送用のデータをセット
      event.dataTransfer.setData("text",event.target.id);
    },false);
  }

  function save_module(){
    // webStorageに保存
    base[0] = [];
    base[1] = [];
    var goodsimg_list = $('#goods img');
    goodsimg_list.each(function(){
      base[0].push($(this).attr('id'));
    });
    var cartimg_list = $('#cart img');
    cartimg_list.each(function(){
      base[1].push($(this).attr('id'));
    });
    localStorage.setItem("saveKey", JSON.stringify(base));
  }

  function restore_module(){
    // webStorageから復元
    var bs = localStorage.getItem("saveKey");
    if(bs){
      base = JSON.parse(bs);
      // Imageオブジェクトをdiv#goodsとdiv#cartに設定する
      var goodsid_list = base[0];
      var cartid_list = base[1];
      var goodsdiv = $('#goods');
      var cartdiv = $('#cart');
      goodsdiv.empty();
      $.each(goodsid_list,function(idx,txt){
        var elment = $(imglist[txt]);
        // jQuery要素をimg要素に変換
        dragstartlis(elment);
        // #goodsに追加する
        goodsdiv.append(elment);
      });
      cartdiv.empty();
      $.each(cartid_list,function(idx,txt){
        var elment = $(imglist[txt]);
        // jQuery要素をimg要素に変換
        dragstartlis(elment);
        // #cartに追加する
        cartdiv.append(elment);
      });
    }else{
      alert('復元データがありません');
    }
  }

  function clear_module(){
    // すべてのデータを削除する
    localStorage.clear();
  }
});

サンプル

画像一覧

カート