如何在JS/JQuery中实现点击选中对象并点击目标点移动？

可以通过状态标记+容器点击事件的组合来实现这个功能，和你现有的draggable拖拽逻辑完全兼容，具体实现思路和代码如下：

核心逻辑 #

• 用变量记录当前选中的块元素
• 给块绑定点击事件：切换选中状态（高亮+记录变量）
• 给容器绑定点击事件：如果有选中的块，将其移动到点击坐标位置

完整代码示例 #

HTML结构

<div class="pipeline-container">
  <div class="block" style="left: 50px; top: 50px;">块1</div>
  <div class="block" style="left: 200px; top: 150px;">块2</div>
</div>

CSS样式

.pipeline-container {
  width: 100%;
  height: 600px;
  border: 1px solid #e0e0e0;
  position: relative;
  background-color: #f9f9f9;
}

.block {
  width: 90px;
  height: 50px;
  background-color: #2196f3;
  color: #fff;
  line-height: 50px;
  text-align: center;
  border-radius: 4px;
  position: absolute;
  cursor: pointer;
  user-select: none;
}

.block.selected {
  outline: 3px solid #f44336;
  outline-offset: 2px;
}

JS/JQuery实现

$(function() {
  // 初始化拖拽功能
  $('.block').draggable({
    start: function() {
      // 拖拽开始时自动标记为选中状态
      $('.block').removeClass('selected');
      $(this).addClass('selected');
      selectedBlock = $(this);
    }
  });

  let selectedBlock = null;

  // 块的选中/取消选中逻辑
  $('.block').on('click', function(e) {
    e.stopPropagation(); // 避免触发容器的点击事件
    const $this = $(this);
    if ($this.hasClass('selected')) {
      // 再次点击选中的块，取消选中
      $this.removeClass('selected');
      selectedBlock = null;
    } else {
      // 选中当前块，取消其他块的选中状态
      $('.block').removeClass('selected');
      $this.addClass('selected');
      selectedBlock = $this;
    }
  });

  // 容器点击：移动选中块到目标位置
  $('.pipeline-container').on('click', function(e) {
    if (!selectedBlock) return;

    // 计算目标坐标（这里设置为块的中心对齐点击点，可根据需求调整）
    const containerOffset = $(this).offset();
    const blockWidth = selectedBlock.width();
    const blockHeight = selectedBlock.height();
    const targetLeft = e.pageX - containerOffset.left - blockWidth / 2;
    const targetTop = e.pageY - containerOffset.top - blockHeight / 2;

    // 带动画移动（不需要动画的话直接用.css()设置）
    selectedBlock.animate({
      left: `${targetLeft}px`,
      top: `${targetTop}px`
    }, 200);
  });
});

额外说明 #

• 支持再次点击选中的块取消选中状态，操作更灵活
• 拖拽和点击移动的状态保持一致（拖拽时自动标记选中）
• 移动时的坐标计算可以根据需求调整（比如改为块的左上角对齐点击点，去掉- blockWidth/2和- blockHeight/2即可）

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