Question

我想在此示例中绘制一条连接列表项 Five 和 One 的行。当用户拖动小部件时，该行应该保持连接到五和一。

＆＃13;

$('.ui-widget-content').draggable({ 
	handle: '.ui-widget-header' }
)
$('.ui-widget-header').disableSelection()

＆＃13;

.ui-widget-content { 
	width: 100px; 
	height: 100px;  
}
.ui-widget-header { 
	cursor: move; 
}
.list-unstyled {
	list-style-type:none;
	padding-left:10px;
}
.primaryKey, .secondaryKey {
	font-weight:bold
}

＆＃13;

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Handles</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
</head>
<body>

<div class="ui-widget-content">
	<div class="ui-widget-header">handle One</div>
	<ul class="list-unstyled">
		<li class="primaryKey">One</li>
		<li>Two</li>
		<li>Three</li>
	</ul>
</div>

<div class="ui-widget-content">
	<div class="ui-widget-header">handle Two</div>
	<ul class="list-unstyled">
		<li>Four</li>
		<li class="secondaryKey">Five</li>
		<li>Six</li>
	</ul>
</div>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

＆＃13;

Answer 1

如果您对确切的线路路径不太担心，可以这样做：

<强> HTML

<div class="image">
  <div class="ui-widget-content" id="one">
    <div class="ui-widget-header">handle One</div>
    <ul class="list-unstyled">
      <li class="primaryKey">One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </div>

  <div class="ui-widget-content" id="two">
    <div class="ui-widget-header">handle Two</div>
    <ul class="list-unstyled">
      <li>Four</li>
      <li class="secondaryKey">Five</li>
      <li>Six</li>
    </ul>
  </div>
  <svg class="lines" width="100%" height="500">
    <line id="linePath_1" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(0,0,0);stroke-width:1" />
  </svg>
</div>

<强>的JavaScript

$(function() {
  var offset = {
    X: 0,
    Y: 0
  };

  function Point(x, y) {
    return {
      "X": x,
      "Y": y
    };
  }

  function drawLine(pointA, pointB) {
    var od = {
      a: {
        X: pointA.X - offset.X,
        Y: pointA.Y - offset.Y
      },
      b: {
        X: pointB.X - offset.X,
        Y: pointB.Y - offset.Y
      }
    };
    console.log(od);
    $("#linePath_1").attr({
      x1: od.a.X,
      y1: od.a.Y,
      x2: od.b.X,
      y2: od.b.Y
    })
  }

  $('.ui-widget-content').draggable({
    handle: '.ui-widget-header',
    containment: ".image",
    drag: function(e, ui) {
      var pkA, pkB, pointA, pointB;
      if ($(this).is("#one")) {
        pkA = $("#one .primaryKey").position();
        pkB = $("#two .secondaryKey").position();
        pointA = Point($("#one").position().left + pkA.left, $("#one").position().top + pkA.top);
        pointB = Point($("#two").position().left + pkB.left, $("#two").position().top + pkB.top);
        console.log(pointA, pointB);
      } else {
        pkA = $("#two .secondaryKey").position();
        pkB = $("#one .primaryKey").position();
        pointA = Point($("#two").position().left + pkA.left, $("#two").position().top + pkA.top);
        pointB = Point($("#one").position().left + pkB.left, $("#one").position().top + pkB.top);
        console.log(pointA, pointB);
      }
      drawLine(pointA, pointB);
    }
  });
  $('.ui-widget-header').disableSelection();
});

这基本上将<svg>元素放在后台，并使用<line>在drag回调期间绘制和更新。如果您愿意，可以根据clientX和clientY event进行此操作，但我认为您希望它似乎是连接密钥。

请注意.position()将提供div中元素的{top, left}。您也可以使用.offset()。

工作示例：https://jsfiddle.net/Twisty/chdznLnx/

模仿Microsoft Access查询向导

1 个答案: