jQuery拖拽放置问题：定位异常、拖拽限制及连线实现求助

嘿，我来帮你逐一搞定这几个拖拽和线条连接的问题！

问题1：无法精确放置在鼠标释放位置 #

你现在的代码是直接把新元素追加到容器里，所以它会按文档流排列，没法定位到鼠标松开的精准位置。要实现精确放置，需要做这两步：

1. 给可放置容器#DroppableCanvas设置相对定位，作为绝对定位元素的参考：

#DroppableCanvas {
  position: relative;
  /* 补充你需要的宽高、边框等样式 */
}

2. 在drop事件中计算鼠标在容器内的坐标，给新元素设置绝对定位：

$('#DroppableCanvas').on('drop',function(event){
  event.preventDefault();
  var data = event.originalEvent.dataTransfer.getData("text/html");
  var nodeCopy = document.getElementById(data).cloneNode(true);
  
  // 计算鼠标在容器内的相对坐标
  var canvasOffset = $(this).offset();
  var mouseX = event.originalEvent.pageX - canvasOffset.left;
  var mouseY = event.originalEvent.pageY - canvasOffset.top;
  
  nodeCopy.setAttribute("id", 'box'+NewBoxId);
  nodeCopy.classList.add('draggable');
  nodeCopy.setAttribute("draggable",true);
  
  // 设置绝对定位，让元素锚定在鼠标位置（这里让鼠标居中于元素，可按需调整）
  nodeCopy.style.position = 'absolute';
  nodeCopy.style.left = (mouseX - $(nodeCopy).width()/2) + 'px';
  nodeCopy.style.top = (mouseY - $(nodeCopy).height()/2) + 'px';
  
  var SelectID = 'select'+NewBoxId;
  var combo = $("<select></select>").attr("id", SelectID).attr("name", SelectID);
  $.each(BusinessStep, function (i, el) {
    combo.append("<option>" + el.text + "</option>");
  });
  $(nodeCopy).append(combo);
  
  // 修正jQuery对象引用错误，用$(nodeCopy)而非未定义的$nodeCopy
  $(nodeCopy).draggable({ 
    revert: "invalid", 
    scope: "items",
    drag: function(event, ui) {
      // 后续连接线条时，在这里更新线条位置，先留钩子
      updateConnections($(this).attr('id'));
    }
  });
  
  $(this).append(nodeCopy);
  NewBoxId++;
});

另外别忘了给dragover事件阻止默认行为，否则drop事件不会触发：

$('#DroppableCanvas').on('dragover', function(event) {
  event.preventDefault();
});

问题2：新创建的矩形无法自由拖拽 #

你代码里有个小疏漏：定义的DOM元素是nodeCopy，但后面调用draggable时用了$nodeCopy——这个变量根本没定义！改成$(nodeCopy).draggable(...)即可，也就是把原生DOM元素转换成jQuery对象后再调用方法。

另外要确保你已经正确引入了jQuery和jQuery UI脚本，且顺序是先引入jQuery，再引入jQuery UI，不然draggable方法会找不到。

问题3：用线条连接矩形 #

最便捷的实现方式是用SVG绘制动态线条，因为SVG可以轻松更新坐标。具体步骤如下：

1. 在可放置容器内添加一个SVG层，放在所有矩形下方作为背景：

<div id="DroppableCanvas" style="position: relative; width: 800px; height: 600px; border: 1px solid #ccc;">
  <svg id="connectionLines" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;"></svg>
</div>

pointer-events: none是为了让SVG不干扰矩形的拖拽事件。

2. 创建数组存储连接关系：

var connections = []; // 每个元素格式：{from: 'box1', to: 'box2', lineId: 'line1'}

3. 写一个创建连接线条的函数：

function createConnection(fromBoxId, toBoxId) {
  var lineId = 'line' + Date.now(); // 生成唯一ID
  var fromBox = $('#' + fromBoxId);
  var toBox = $('#' + toBoxId);
  
  // 获取两个盒子的中心坐标（相对于容器）
  var canvasOffset = $('#DroppableCanvas').offset();
  var fromCenter = {
    x: fromBox.offset().left - canvasOffset.left + fromBox.width()/2,
    y: fromBox.offset().top - canvasOffset.top + fromBox.height()/2
  };
  var toCenter = {
    x: toBox.offset().left - canvasOffset.left + toBox.width()/2,
    y: toBox.offset().top - canvasOffset.top + toBox.height()/2
  };
  
  // 创建SVG线条并添加到画布
  var line = `<line id="${lineId}" x1="${fromCenter.x}" y1="${fromCenter.y}" x2="${toCenter.x}" y2="${toCenter.y}" stroke="#000" stroke-width="2"/>`;
  $('#connectionLines').append(line);
  
  // 保存连接关系
  connections.push({from: fromBoxId, to: toBoxId, lineId: lineId});
}

4. 写一个更新线条位置的函数（拖拽矩形时调用）：

function updateConnections(boxId) {
  // 筛选出和当前盒子相关的所有连接
  var relatedConnections = connections.filter(conn => conn.from === boxId || conn.to === boxId);
  
  relatedConnections.forEach(conn => {
    var fromBox = $('#' + conn.from);
    var toBox = $('#' + conn.to);
    var canvasOffset = $('#DroppableCanvas').offset();
    
    var fromCenter = {
      x: fromBox.offset().left - canvasOffset.left + fromBox.width()/2,
      y: fromBox.offset().top - canvasOffset.top + fromBox.height()/2
    };
    var toCenter = {
      x: toBox.offset().left - canvasOffset.left + toBox.width()/2,
      y: toBox.offset().top - canvasOffset.top + toBox.height()/2
    };
    
    // 更新线条坐标
    $('#' + conn.lineId).attr({
      x1: fromCenter.x,
      y1: fromCenter.y,
      x2: toCenter.x,
      y2: toCenter.y
    });
  });
}

5. 给每个矩形添加连接触发方式（比如按钮）：

// 在创建nodeCopy后添加连接按钮
var connectBtn = $('<button style="margin-top:5px;">连接到其他盒子</button>').click(function() {
  // 临时绑定点击事件，让用户选择目标盒子
  $('.draggable').off('click.connect').on('click.connect', function() {
    var targetId = $(this).attr('id');
    var currentId = $(nodeCopy).attr('id');
    if (targetId !== currentId) {
      createConnection(currentId, targetId);
      $('.draggable').off('click.connect'); // 完成连接后解绑事件
    }
  });
});
$(nodeCopy).append(connectBtn);

这样就能实现拖拽矩形时线条自动跟随更新的效果了。

内容的提问来源于stack exchange，提问作者BATMAN_2008