Javascript 如何使可拖动元素跟随鼠标指针

我有几件可以拖的东西。当我拖动它们时，助手克隆始终显示在页面顶部。如何使它们在拖动时跟随鼠标

我知道

cursorAt:{left:0，top:0}

选项，但我的元素定位将不同，我不知道拖动将从哪个位置开始。怎么办？这是我尝试过的其他方法：

$('#widget li').draggable({
            helper: 'clone',
            revert: 'invalid',
            cursorAt: { left: helperX, top: helperY },
            start: function(e, ui){
              $('#widget').css({'position': ''});
              helperX = $('#widget li').width()/2;
              helperY = e.pageY - ui.position.top;
            },
            stop: function(){
              $('#widget').css({'position': 'relative'});
            },
            drag: function(){
              $(this).css({'z-index':'1500'});
            }
        });

这不起作用，因为定义

helperX

和

helperY

太晚了。这是小提琴：

$（'#deviceName li'）。可拖动({
助手：“克隆”，
还原：“无效”，
开始：功能（e、ui）{
$（'#deviceName'）.css({
“位置”：”
});
$（ui.helper）.css({
“顶部”：“400px”
});
},
停止：函数（）{
$（'#deviceName'）.css({
“位置”：“相对”
});
},
拖动：函数（）{
$（this.css）({
“z索引”：“1500”
});
}
});
$（'#接口li'）。可拖动({
助手：“克隆”，
还原：“无效”，
开始：功能（e、ui）{
$（“#接口”）.css({
“位置”：”
});
$（ui.helper）.css({
“顶部”：“400px”
});
},
停止：函数（）{
$（“#接口”）.css({
“位置”：“相对”
});
},
拖动：函数（）{
$（this.css）({
“z索引”：“1500”
});
}
});
函数foo（）{
$（'.foo'）。每个（函数（）{
$（此）。可拖动({
//包含：$（this）.parent（），
堆栈：'.foo'
});
});
}
var fooCount=$（'.foo'）.length；
$（'#mainDiv'）。可拖放({
drop：函数（事件、用户界面）{
如果（！ui.draggable.hasClass（'foo'））{
var Class=ui.draggable.attr（“类”）；
var title=ui.draggable.text（）.trim（）；
变量项=$（'set'+title+'xAdd new link'）；
$（本）。追加（项目）；
食物计数+=1；
foo（）；
}
}
});
html{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
背景#2c2c；
背景：url（数据：image/svg+xml；base64，PD94BWGDMVYC2LVBJ0IMS4WIIA/PGO8C3ZNIHHTBG5ZPSJODHRWOI8VD3D3LNCZYLM9YZYD8YMDAWL3N2ZYIGD2LKDGGG9IJEWMCUIIGDMLLD0JVED0IMCAWIDEGMCHC2VYDMV3BC3BLY3R3RYXYBRP00IBM9UZSI+CIAGPGG8BMVHCKDYWYWYW5LKYKYW5LKYZZY2TCZ2TZ2VUZ2VUZ2VUZJJJJJJJJJJJJJJJ0IDV9IJ0IMV9V9IZZZZZZZZY2V9C）3.vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvC3RVCCBVZMZZZQ9IJEWMCUIHN0B3ATY29SB3I9IIMXMZMZMTMIIHN0B3ATB3BHY2L0ET0IMSIVPGOGIDWGLUZWFYR3JHZGLLBNQ+CIAGPHJLY3QGED0IMCIGE0IMCIGD2LKDG9IJEIGHLDODD0IMSIGZMLSB0IDXKCNNCMFKLXVJZ2CTZ2VZ2VZ2VZVZ2VZVZVZ2VUZZZVZZZZZZZZ2VZZZZZJJK9MCC+；
背景：-莫兹线性梯度（左，#2C2C0%，#3d3d3d 37%，35353566%，35353566%，35353566%，35313100%）；
背景：-webkit渐变（线性、左上、右上、颜色停止（0%、#2c2c2c）、颜色停止（37%、#3D3D）、颜色停止（66%、353535）、颜色停止（66%、353535）、颜色停止（100%、35313））；
背景：-webkit线性梯度（左，#2C2C0%，#3D3D37%，35353566%，35353566%，353535100%）；
背景：-o-线性梯度（左，#2C2C0%，#3d3d3d 37%，35353566%，35353566%，35353566%，35313100%）；
背景：-ms线性梯度（左，#2C2C0%，#3d3d3d 37%，35353566%，35353566%，35353566%，35313100%）；
背景：线性梯度（向右，#2C2C0%，#3D3D37%，35353566%，35353566%，353535100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#2c2c2c'，endColorstr='#131313'，GradientType=1）；
}
身体{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
颜色：#b8c0c8；
背景：rgba（0,0,0,0.3）；
}
#左撇子{
显示：内联块；
宽度：15%；
身高：100%；
右边框：3倍实心rgba（0,0,0,0.2）；
框大小：边框框；
浮动：左；
保证金：0；
填充：0；
溢出：自动；
文本阴影：1px1px1pRGBA（0,0,0,0.33）；
}
#设备信息{
最小高度：自动；
边框底部：3倍实心rgba（0,0,0,0.2）；
填充：3倍；
调整大小：垂直；
溢出：自动；
}
#菜单{
填充：0；
保证金：0；
边缘底部：5px；
列表样式类型：无；
}
#菜单里{
列表样式：无；
填充：2px；
边界半径：4px；
页边顶部：1px；
}
#菜单里的跨度{
显示：块；
宽度：100%；
最小高度：20px；
线高：20px；
文本对齐：居中；
盒影：02px2pRGBA（0,0,0,0.26）；
-webkit盒阴影：0 2px2pRGBA（0,0,0,0.26）；
-moz盒阴影：02px2prgba（0,0,0,0.26）；
光标：指针；
}
#菜单{
填充：0；
列表样式类型：无；
溢出：隐藏；
}
#菜单李乌丽{
宽度：100%；
最大宽度：250px；
文本对齐：居中；
最小高度：20px；
线高：20px；
保证金：自动；
边框底部：1px实心rgba（0,0,0,0.3）；
光标：移动；
}
#第一个孩子{
边缘顶部：2倍；
边框左上半径：4px；
边框右上角半径：4px；
}
#最后一个孩子{
边框左下半径：4px；
边框右下半径：4px；
边框底部：无；
}
#设置iv{
保证金：0；
宽度：100%；
最小高度：10px；
框大小：边框框；
保证金：0；
填充：3倍；
溢出：自动；
}
#mainDiv{
显示：内联块；
宽度：85%；
最小高度：100%；
框大小：边框框；
位置：相对位置；
浮动：左；
保证金：0；
溢出：自动；
填充：3倍；
}
傅先生{
最小宽度：250px；
宽度：自动；
文本对齐：居中；
最小高度：30px；
边框：1px实心#515151；
边界半径：6px；
位置：绝对位置；
填充：0；
溢出：隐藏；
文本阴影：1px1px1pRGBA（0,0,0,0.33）；
盒影：5px5pxRGBA（0,0,0,0.1）；
}
.thClass{
显示：块；
最小宽度：150px；
宽度：102%；
左边距：-3px；
文本对齐：居中；
盒影：02px2pRGBA（0,0,0,0.26）；
-webkit盒阴影：0 2px2pRGBA（0,0,0,0.26）；
-moz盒阴影：0 2px 2px rgba（0，
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>');
      item.css("left", ui.position.left);  // added
      item.css("top", ui.position.top);  // added
      $(this).append(item);
      fooCount += 1;
      foo();
    }
  }
});

$('#interface li').draggable({helper: 'clone', cursorAt: { left: 5,top:5 }});