Javascript 放置以鼠标位置为中心的元素

我有一个容器，我想从下面的菜单中放置一个图像，但是当我将其放置在主容器中时，我无法获得正确的位置，它似乎是随机放置在容器中的。如何使项目在鼠标位置居中放置

var x=null；
$（函数（）{
美元（“.piece”）。可拖动({
取消：“a.ui-icon”，
回复：“无效”，
助手：“克隆”，
安全壳：“#容器”，
});
$（“.piece”）.可拖放({
接受：“.cap”，
drop：函数（事件、用户界面）{
x=ui.helper.clone（）；
x、 （本）附件；
}
});
美元（“.cap”）。可拖动({
取消：“a.ui-icon”，
助手：“克隆”
});
$（“#容器”）。可拖放({
接受：“.piece”，
drop：函数（事件、用户界面）{
x=$（''）；
x、 addClass（“单件分割”）；
x、 css（'top'，ui.position.top'）；
x、 css（'左'，ui.position.left）；
x、 拖拉的({
安全壳：“#容器”，
光标：“移动”，
});
x、 （本）附件；
x、 可降落({
接受：“.cap”，
drop：函数（事件、用户界面）{
变量y=$（'
我希望四种颜色的棋子在灰色容器中以鼠标位置为中心落下，但它几乎是随机落下的。这是一把小提琴：
看起来您可能只需要稍微调整一下设置。这些%的设置很有用，但您可能需要使用更好的CSS来调整它们，以达到最终目的：

 $("#container").droppable({
    accept: ".piece",
    drop: function(event, ui) {
      x = $('<div/>');
      x.addClass('piece-div');
      x.css('top', '15%');  // Change this to some %
      x.css('left','35%'); // Change this to some %

      x.draggable({
        containment: '#container',
        cursor: 'move',
      });

$（“#容器”）。可拖放({
接受：“.piece”，
drop：函数（事件、用户界面）{
x=$（''）；
x、 addClass（“单件分割”）；
x、 css（'top'，'15%'）；//将其更改为某些%
x、 css（'left'，'35%'）；//将其更改为某些%
x、 拖拉的({
安全壳：“#容器”，
光标：“移动”，
});