如何让可拖拽元素的克隆辅助体跟随鼠标指针移动？

我明白你遇到的困扰：使用helper: 'clone'时，克隆的辅助体总是固定在页面顶部，没法跟着鼠标移动。你尝试的cursorAt选项之所以失效，是因为你在start事件里才计算偏移量，但cursorAt在draggable初始化时就已经被读取了，当时helperX和helperY还未定义，自然起不到作用。

核心解决方案：在start事件中动态设置cursorAt #

我们需要在拖拽开始的瞬间，计算鼠标相对于被拖拽元素的位置偏移，然后动态更新cursorAt选项，这样辅助体就能精准跟随鼠标指针移动。

修改你的第一个代码片段如下：

$('#widget li').draggable({
  helper: 'clone',
  revert: 'invalid',
  start: function(e, ui) {
    $('#widget').css({'position': ''});
    // 计算鼠标相对于当前拖拽元素的偏移量
    const elementOffset = $(this).offset();
    const cursorOffsetX = e.pageX - elementOffset.left;
    const cursorOffsetY = e.pageY - elementOffset.top;
    // 动态设置cursorAt选项，让辅助体跟随鼠标
    $(this).draggable('option', 'cursorAt', {
      left: cursorOffsetX,
      top: cursorOffsetY
    });
  },
  stop: function(){
    $('#widget').css({'position': 'relative'});
  },
  drag: function(){
    $(this).css({'z-index':'1500'});
  }
});

针对你第二个代码片段的优化 #

你在#deviceName li和#interface li的拖拽设置里，手动给ui.helper设置了固定的top: 400px，这是导致辅助体偏离鼠标的关键原因，需要移除这个设置，并添加动态cursorAt的逻辑：

// 合并两个li的拖拽设置，减少重复代码
$('#deviceName li, #interface li').draggable({
  helper: 'clone',
  revert: 'invalid',
  start: function(e, ui) {
    $(this).closest('ul').css({'position': ''});
    // 计算鼠标偏移并设置cursorAt
    const elementOffset = $(this).offset();
    const cursorOffsetX = e.pageX - elementOffset.left;
    const cursorOffsetY = e.pageY - elementOffset.top;
    $(this).draggable('option', 'cursorAt', {
      left: cursorOffsetX,
      top: cursorOffsetY
    });
  },
  stop: function(){
    $(this).closest('ul').css({'position': 'relative'});
  },
  drag: function(){
    $(this).css({'z-index': '1500'});
  }
});

// 其余代码保持不变
function foo() {
  $('.foo').each(function() {
    $(this).draggable({ 
      //containment: $(this).parent(), 
      stack: '.foo' 
    });
  });
}

var fooCount = $('.foo').length;

$('#mainDiv').droppable({
  drop: function(event, ui) {
    if (!ui.draggable.hasClass('foo')) {
      var Class = ui.draggable.attr("class");
      var title = ui.draggable.text().trim();
      var item = $('<table class="foo elementTable ' + Class + '" name="' + title + '" id="' + (fooCount + 1) + '"><tr class="tableHeader"><th class="thClass"><button class="settings">set</button>' + title + '<span class="close">x</span></th></tr><tr><td class="add"><span class="addList">Add new link</span></td></tr></table>');
      $(this).append(item);
      fooCount += 1;
      foo();
    }
  }
});

方案生效的原因 #

• cursorAt定义的是鼠标相对于辅助体的位置，我们在拖拽开始时计算的鼠标在原元素上的偏移，和克隆辅助体（尺寸与原元素一致）的偏移完全对应，所以设置后辅助体就能精准贴合鼠标位置。
• 通过$(this).draggable('option', 'cursorAt', ...)在start事件中动态更新选项，完美解决了初始化时偏移量未定义的问题。

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