Question

我在这里创造了一个小提琴，你可以玩：http://codepen.io/anon/pen/pvOKey

我想将拖动的对象垂直/水平居中到光标，这意味着当我在其角落拖动一个对象时，我希望该对象在光标下居中，否则用户体验非常糟糕，拖动大对象。

我搜索了SO解决方案并找到了一些，但它们无法正常工作。

我使用draggable的create函数来设置顶部/左侧位置，但它不起作用。

任何人都可以提供帮助吗？

<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()。

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

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

要处理调整大小屏幕问题，可以在窗口调整大小回调时调用函数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() {
      },`

它可以按照你的意愿工作。

中心在Cursor下拖动对象

2 个答案: