jquery drag and drop communication



  • What I want is: введите сюда описание изображения

    Visualization picture. The challenge is to connect the blocks (dynamically extend the arrow from one block to the other) and, at the end, to find a structure for further work. For example:

    a link to b

    b link to c

    One block may also have several connections. Please indicate how to make connections.

    The trans-shipment was as follows:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI Draggable - Default functionality</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">
      <style>
      #draggable { width: 50px; height: 50px; padding: 0.5em; }
      #draggable1 { width: 50px; height: 50px; padding: 0.5em; }
      </style>
      <script>
      $(function() {
        $( "#draggable" ).draggable();
      });
    

    $(function() {
    $( "#draggable1" ).draggable();
    });

    </script>
    </head>
    <body>

    <div id="draggable" class="ui-widget-content">
    <p>Drag me</p>
    </div>

    <div id="draggable1" class="ui-widget-content">
    <p>Drag me</p>
    </div>

    </body>
    </html>



  • It's a working option, but it's not a good code. http://plnkr.co/edit/OO2BaEyxEFTkLmrdL0g5?p=preview on plunker.

    "use strict";
    

    var can = $("#can").get(0), ctx = can.getContext('2d');

    var boxes = [];

    function get_box(x, y) {
    for (var box of boxes) {
    if (x >= box.x && x < box.x + box.w && y >= box.y && y < box.y + box.h) {
    return box;
    }
    }
    return null;
    }

    function getxy(e) { return {x:e.clientX, y:e.clientY}; }

    class Box {
    constructor(x, y, w, h) {
    this.x = x; this.y = y;
    this.w = w; this.h = h;
    this.drag = null;
    this.name = String.fromCharCode("A".charCodeAt() + boxes.length);
    boxes.push(this);
    }
    on_mouse_down(e) {
    this.drag = {
    oldx: this.x, oldy: this.y, // old position of box
    msx: e.clientX, msy: e.clientY // mouse start x, y
    };
    }
    on_mouse_move(e) {
    if (!this.drag) return;
    var dx = e.clientX - this.drag.msx, dy = e.clientY - this.drag.msy;
    this.x = this.drag.oldx + dx;
    this.y = this.drag.oldy + dy;
    draw_boxes();
    }
    on_mouse_up(e) {
    this.drag = null;
    }
    draw() {
    ctx.save();
    ctx.fillRect(this.x, this.y, this.w, this.h);
    ctx.font = "30px Georgia";
    ctx.fillStyle = "white";
    ctx.fillText(this.name, this.x + 10, this.y + 30);
    ctx.restore();
    }
    center() {
    return {x: this.x + Math.floor(this.w/2), y: this.y + Math.floor(this.h/2) };
    }
    }

    var link = null, links = [];

    function on_mouse_event(method_name) {
    return function (e) { for (var box of boxes) boxmethod_name; }
    }
    $("#can").mousedown(function (e) {
    var p = getxy(e), b = get_box(p.x, p.y);
    if (e.shiftKey) {
    new Box(p.x, p.y, 50, 50);
    draw_all();
    return;
    }
    if (!b) return;
    if (e.ctrlKey) {
    link = {b};
    return;
    }
    get_box(p.x, p.y).on_mouse_down(e);
    });
    $("#can").mousemove((e) => {
    if (link) {
    link.t = getxy(e);
    } else {
    for (var box of boxes) box.on_mouse_move(e);
    }
    draw_all();
    });
    $("#can").mouseup((e) => {
    var x = e.clientX, y = e.clientY, b = get_box(x, y);
    if (link) {
    if (link.b == b || !b) {
    link = null;
    return;
    }
    links.push({from:link.b, to:b});
    } else {
    for (var box of boxes) box.on_mouse_up(e);
    }
    link = null;
    });

    $("#getlinks").click((e) => {
    var msg = "";
    for (var l of links) {
    msg += Box "${l.from.name}" свзяан с Box "${l.to.name}"&lt;br&gt;;
    }
    $("#res").html(msg);
    });

    new Box(10, 10, 50, 50);
    new Box(150, 150, 50, 50);

    function draw_boxes() {
    for (var box of boxes) {
    box.draw();
    }
    }

    function draw_links() {
    for (var l of links) {
    var bc1 = l.from.center(), bc2 = l.to.center();
    ctx.beginPath();
    ctx.moveTo(bc1.x, bc1.y);
    ctx.lineTo(bc2.x, bc2.y);
    ctx.stroke();
    }
    }

    function draw_link() {
    var bc = link.b.center();
    ctx.beginPath();
    ctx.moveTo(bc.x, bc.y);
    ctx.lineTo(link.t.x, link.t.y);
    ctx.stroke();
    }

    function draw_all() {
    ctx.clearRect(0, 0, can.width, can.height);
    draw_links();
    draw_boxes();
    if (link) draw_link();
    }

    draw_all();

    html,
    body {
    margin: 0;
    padding: 0;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div>
    <canvas id="can" width="300" height="300">
    This text is displayed if your browser does not support HTML5 Canvas.
    </canvas>
    </div>

    <hr>MouseMove -- перемещение коробок.
    <br>Shift + Click -- добавить коробку.
    <br>Ctrl (на коробке) + MouseMove -- провести линию.
    <br>
    <hr>
    <button id="getlinks">Получить все связи</button>
    <p id="res"></p>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2