web-dev-qa-db-ja.com

ドラッグ可能とドロップ可能の間に線を引く方法は？

優れたJQuery UIを使用して「マッピング」を行い、ユーザーが1つのプログラムの人を他のプログラムの人に「マッピング」できるようにします。

この単純なJQueryを使用して：

$(document).ready(function() {
    $("div .draggable").draggable({
        revert: 'valid',
        snap: false
    });

    $("div .droppable").droppable({
        hoverClass: 'ui-state-hover',
        helper: 'clone',
        cursor: 'move',
        drop: function(event, ui) {
            $(this)
                .addClass('ui-state-highlight')
                .find("img")
                .removeAttr("src")
                .attr("src", "_assets/img/icons/check-user-48x48.png");

            $(this).droppable('disable');

            $(ui.draggable)
                .addClass('ui-state-highlight')
                .find("img")
                .removeAttr("src")
                .attr("src", "_assets/img/icons/check-user-48x48.png");

            $(ui.draggable).draggable('disable');
        }
    });

    $("div .droppable").bind("dblclick", function() {
        $(this)
            .removeClass('ui-state-highlight')
            .find("img")
            .removeAttr("src")
            .attr("src", "_assets/img/icons/user-48x48.png");
        $(this).droppable('enable');

        EnableSource($(this));
    });
});

私はこれに着きます：

alt text

私が本当に欲しかったものは（可能であれば）ElsaとKjellの間に行を作成し、それらの間の接続を明確にしました。

私はいつでもボックス内の数字でそれを行うことができますが、線を使用してこれを行う方法を本当に知りたかったです。

ありがとう。

jqueryhtmljquery-uidrawingsvg
52
balexandre
  • updated（08.Jul.2013）ライブラリの最新バージョンで更新。 JsRenderを使用してHTMLをリファクタリング。
  • updated（29.Sep.2011）GITリポジトリを追加。コードをきれいにしました。最新のフレームワークバージョンへの更新。
  • 更新（2013年3月3日）動作例のリンクを修正。

現在の例の使用：

ソース

Gitリポジトリのソースコード

デモ

JSBINでのページデモ

[〜＃〜] ff [〜＃〜]、[〜＃〜] ie [〜＃ 〜]、Chrome、SafariおよびOpera.

テスト済み：

  • Firefox 6および7 .. 22
  • IE 8および9 .. 10
  • Chrome 12以降.. 27
  • Safari 5以降.. 6
  • Opera 11.51 .. 15

すべてをお見せするために、私は自分の成果の小さなデモを作成しました（今日は誇りに思っています！）。

ビデオデモ

と小さな画像：

alt text

65
balexandre

リンクを投稿するにはあまりにも新しいのですが、「jQueryを使用した簡単な描画用のライブラリ」をGoogleで検索すると、探しているものが見つかるかもしれません。 :)

リンクはこちら

5
Will Moore