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

svg.jsとsvg.draggable.jsを使って、SVGタグ内のオブジェクトをドラッグ&ドロップさせてみる

More than 5 years have passed since last update.

この記事は「SVG Advent Calendar 2014」の7日目の記事です。前日の記事は_tanshioさんの「IEにも対応したレスポンシブSVGの作り方」でした。

以前、「HTML5のcanvas内の複数の画像をドラッグ&ドロップさせてみる」で書いた内容と同じことをSVGで試してみたくなったのでまとめました。

SVGを操作するためのライブラリはRaphaëlSnap.svgが有名ですが、今回はsvg.jsとそのプラグインであるsvg.draggable.jsを利用しました。

svg.jsは、minifyされたものだと11.8KB 程度と非常に軽量で、ドキュメントも見やすく、今回触ってみてとても扱いやすいライブラリだと感じました。
svgjs.PNG

実際のコードはこんな感じで、オブジェクトに対して「draggable()を呼び出す」たったこれだけです。カンタン!!

HTML
<head>
    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/svg.js/dist/svg.js"></script>
    <script src="bower_components/svg.draggable.js/svg.draggable.js"></script>
    <!-- endbower -->
    <!-- endbuild -->
</head>
<body>
    <svg id="drawing" style="border:solid 1px;"></svg>

    <script>
        var draw = SVG('drawing').size(500, 500);

        var image = draw.image('images/PAK15_sesujiwonobasutsuyopon500.jpg', 150, 100).dx(30).dy(30);
        image.draggable();

        var text = draw.text('画像はドラッグ&ドロップできますか?').move(150, 150).fill('#f06');
        text.draggable();

        var rect = draw.rect(100, 100).attr({fill: '#eee'}).dx(200).dy(200);
        rect.draggable();

        var circle = draw.circle(100).attr({fill: '#ff0'}).dx(300).dy(300);
        circle.draggable();
    </script>

</body>

このようにsvg内に並んでいるオブジェクトが。。。。

before.PNG


ドラッグ&ドロップができるようになりました。

after.PNG

  • 今回の検証に際し利用したもの
akase244
Why not register and get more from Qiita?
  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
No 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
ユーザーは見つかりませんでした