在光标下居中拖动对象

Question

我在这里创建了一个 fiddle 你可以玩：http://codepen.io/anon/pen/pvOKey

我想将拖动的对象 vertically/horizontally 置于光标的中心，这意味着当我在其角处拖动对象时，我希望对象在光标下方居中，否则用户体验非常糟糕，拖动较大对象。

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

我使用 draggable 的创建函数来设置 top/left 位置，但是它不起作用。

有人可以帮忙吗？

<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);        

        }
    });
});

Answer 1

我认为您在查找 ui.helper 时遇到问题，如果您检查控制台，您将看到该消息：

Uncaught ReferenceError: ui is not defined

我编辑了你的代码，只使用了 JQuery 的 width() 和 height() 函数，它似乎可以工作。看看这个 CodePen

已编辑：您还必须在拖动回调中包含 cursorAt 选项，以便更新 width() 和 height()调整大小的情况 window.

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

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

为了处理调整屏幕大小的问题，你可以在 window 调整大小回调中调用函数 addCursorAtOption，检查这个 CodePen

create: function(e,x){
    var self = this;
    $(window).resize(function() {
       addCursorAtOption(self);
    });
    addCursorAtOption(self);
}

Answer 2

这里的问题是您处理的事件。 create: function() 这行不通。需要使用拖拽功能

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

您还使用了 ui 而未在函数语句中指定它，并且您使用了 this 而不是此处使用的 element。在您当前

的代码中替换它

drag: function() {
      },`

如你所愿。

在光标下居中拖动对象

Center dragged object under the Cursor

jquery

jquery-ui

jquery-draggable