Help us understand the problem. What is going on with this article?

jQuery UI とHTML5 Drag Drop API を組み合わせてdraggableな要素をぽこぽこ作ってみる

More than 5 years have passed since last update.

備忘録です.
前回書いたjQuery UI の draggable とHTML5のDrag Drop API を組み合わせてみたいと思います.
今回はドラッグ可能な要素を下のエリアにドロップすると,
ドラッグエリア上で自由に動かせる要素が新しく出来上がるといったサンプルプログラムを書いてみたいと思います.

環境

  • MacOSX (10.9)
  • jQuery UI (1.11.0)
  • jQuery (1.10.2)

サンプル

上部の要素を下部のエリアにドラッグ&ドロップすると自由に動かせる要素が下部のエリアにできます.
作った要素はダブルクリックで削除することができます.

ddSample.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>drag and drop test</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./jquery-ui-1.11.0/jquery-ui.css">
    <link rel="stylesheet" href="./css/ddStyle.css">

</head>
<body>
    <div id="container">

        <div id="dragTargetsArea">
            <p class="dragTarget" draggable="true">drag me.</p>
            <p class="dragTarget" draggable="true">drag drag!</p>
        </div>

        <div id="draggableArea">

        </div>

    </div>

    <script src="./jquery-ui-1.11.0/external/jquery/jquery.js"></script>
    <script src="./jquery-ui-1.11.0/jquery-ui.js"></script>
    <script src="./js/ddEvent.js"></script>
</body>
</html>
ddStyle.css
body {
    width: 940px;
    height: 100%;
    margin: 0 auto;
    padding: 0;
}

div#draggableArea {
    width: 100%;
    height: 300px;
    border: solid 1px #000;
}

div.draggable {
    width: 20%;
    height: 10%;
}
ddEvent.js
$(function() {

    $('.draggable').draggable( {

        containment: '#draggableArea',
        scroll: false,

    });

    $('.dragTarget').on('dragstart', function(e) {

        // this は p.dragTarget のうち今ドラッグしてるもの
        dragSrcEl = this;
        console.log(this);

    });

    // ドラッグエリアに要素を追加,ドラッグエリアから要素をダブルクリックで削除
    $('#draggableArea').on('dragover', function(e) {

        e.preventDefault();

    }).on('drop', function(e) {

        if( !(e.isDefaultPrevented()) ) {
            e.stopPropagation();
        }

        if(dragSrcEl != this) {
            // this は div#draggableArea
            $('#'+this.id).append("<div class='draggable'><p>"+dragSrcEl.innerText+"</p></div>");
        }

        $('.draggable').each(function() {
            $(this).draggable( {
                containment: '#draggableArea',
                scroll: false,
            });
        });

    }).on('dblclick', '.draggable', function(e) {
        $(this).remove();
    });

});

自由に動かせるようになったでしょうか.
今回はこちら http://www.html5rocks.com/ja/tutorials/dnd/basics/ を参考にしました.

ひとこと

最近,調べて書き終わったら,調べてたタブを閉じる前にきーたに書き留める習慣がつきました.
きーたのひとありがとうございます.

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away