Jquery 将拖动的对象居中放置在光标下

我在这里制作了一把小提琴，你可以用它演奏：

我想垂直/水平地将拖动的对象置于光标的中心，这意味着当我在其拐角处拖动对象时，我希望该对象位于光标的中心，否则拖动大型对象的用户体验非常糟糕

我在谷歌上搜索了SO解决方案，找到了一些，但它们不起作用

我使用DragTable的创建功能来设置顶部/左侧位置，但它不起作用

有人能帮忙吗

<div id="itemContainer1"> 
  <div class="item i2">2</div>
</div>

<div id="itemContainer2"> 
  <div class="item i4">4</div>
</div>


<!-- border-box => IE9+ -->
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body, html { 
  padding:0;
  margin:0;
  height:100%; 
}

.start-dragging{
  transform: scale(0.25); /* Standard syntax */
  transition: transform .3s ease-out; 
}
.stop-dragging{
  transform: scale(1); /* Standard syntax */
  transition: transform .3s ease-out; 
}


.item{
  position:absolute; 
} 

#itemContainer1{
  background:green;
  height:100%; 
  position:relative; 
  right:50%;

}

#itemContainer2{
  background:blue;
  height:100%; 
  width:50%;
  position:relative; 
  left:50%;
  top:-100%;

}
.item.i2 {
  top:50%;
  left:50%;
   width: 44%; 
   height:44%;
   background:lightgreen;  
}

.align-vertical-colums {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}



$(document).ready(function () {
    $("#itemContainer1 > div").each(function (index, element) {

      $(element).addClass("stop-dragging"); 

      $(element).draggable({cursor: 'move', stack: ".item",helper: "original",
        create: function(e,x){
          $(this).draggable("option", "cursorAt", {
                 left: Math.floor(ui.helper.width() / 2),
                 top: Math.floor(ui.helper.height() / 2)
               }); 
        },

                            start: function() {

           // $(this).css({"z-index": 100000 }); // the highest z-index
            $(this).toggleClass( 'stop-dragging start-dragging');
          },
          drag: function() {
          },
          stop: function() {
           //  $(this).css("z-index", ''); // remove the z-index
              $(this).toggleClass( 'start-dragging stop-dragging');

          }
       });   

        $(element).addClass("align-vertical-colums");
    });

  $("#itemContainer1").droppable({       
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function (event, ui) {
     var element = document.elementFromPoint(event.clientX, event.clientY);        

        }
    });
});

2.
4.
* {
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
正文，html{
填充：0；
保证金：0；
身高：100%；
}
.开始拖动{
变换：缩放（0.25）；/*标准语法*/
转变：转变。3秒放松；
}
.别拖了{
变换：缩放（1）；/*标准语法*/
转变：转变。3秒放松；
}
.项目{
位置：绝对位置；
} 
#项目容器1{
背景：绿色；
身高：100%；
位置：相对位置；
右：50%；
}
#项目容器2{
背景：蓝色；
身高：100%；
宽度：50%；
位置：相对位置；
左：50%；
前-100%；
}
.项目1.2{
最高：50%；
左：50%；
宽度：44%；
身高：44%；
背景：浅绿色；
}
.对齐垂直立柱{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
}
$（文档）.ready（函数（）{
$（“#itemContainer1>div”）。每个（函数（索引，元素）{
$（元素）.addClass（“停止拖动”）；
$（元素）.draggable（{cursor:'move'，stack:.item'，helper:'original“，
创建：函数（e，x）{
$（this）.draggable（“选项”，“游标”{
左：Math.floor（ui.helper.width（）/2），
顶部：Math.floor（ui.helper.height（）/2）
}); 
},
开始：函数（）{
//$（this.css（{“z-index”：100000}）；//最高的z-index
$（this.toggleClass（'停止拖动开始拖动'）；
},
拖动：函数（）{
},
停止：函数（）{
//$（this.css（“z-index”，“”）；//删除z-index
$（this.toggleClass（'start dragging stop dragging'）；
}
});   
$（元素）.addClass（“对齐垂直列”）；
});
$（“#itemContainer1”）。可拖放（{
activeClass：“ui状态悬停”，
hoverClass：“ui状态处于活动状态”，
drop：函数（事件、用户界面）{
var元素=document.elementFromPoint（event.clientX，event.clientY）；
}
});
});

我认为您在查找

ui.helper时遇到问题，如果您检查控制台，您将看到以下消息：

Uncaught ReferenceError: ui is not defined

我编辑了你的代码，只使用了JQuery的
width（）
和
height（）
函数，看起来很有效。看看这个

已编辑：还必须在拖动回调中包含
cursorAt
选项，以便在调整窗口大小时更新
width（）
和
height（）

drag: function(e,x){
    addCursorAtOption(this);
}

function addCursorAtOption(element){
    $(element).draggable("option", "cursorAt", {
      left: $(element).width()/2,
      top: $(element).height()/2
    }); 
  }

要处理屏幕大小调整问题，可以在窗口大小调整回调上调用函数
addCursorAtOption
，选中此项

这里的问题是您处理的事件<代码>创建：函数（）

这不起作用。您需要使用拖动功能

     drag: function( e,ui) {
        $(element).draggable("option", "cursorAt", {
             left: Math.floor(ui.helper.width() / 2),
             top: Math.floor(ui.helper.height() / 2)
           });
      },

您还使用了

ui

，但没有在函数语句中指定它，并且您使用了

this

，而不是这里使用的

元素

。将此替换到您当前使用的代码中

drag: function() {
      },` 

---

它可以按照您的要求工作。

我考虑了您的意见，这是更改后的笔：我无法再拖动可拖动，原因是：控制台错误：未捕获错误：无法在初始化之前调用可拖动的方法；试图调用方法“option”您不能重复使用

元素

请保留我用

（e，ui）

编写的函数，然后它就可以作为一个符咒使用了<代码>拖动：函数（e，ui）{我在哪里重复使用元素？对不起，我不明白你的意思。只需将

拖动：函数（元素，ui）{

更改为

拖动：函数（e，ui）{

在您的：-）中有效！但仅在我的产品环境中的代码笔上有效。具有复杂的布局等。初始拖动问题仍然存在：/有什么想法吗？我使用了您最新的代码！在调整窗口大小时！在这种情况下，您回答的问题已经解决。现在，您应该使用需要帮助的实际代码创建另一个问题（因为你可能有另一个问题）或更新此问题。你还应该详细说明你在prod env.中使用的任何其他库，如bootstrap等。这可能与此相关。感谢你的帮助。这是一个前所未有的帮助，但最终我必须弄清楚：(

drag: function() {
      },`