我遇到了同样的问题,发现这一切都是因为位置固定的引导导航栏“navbar-fixed-top”类,它<body>
比<html>
顶部低了 60px。因此,当我在我的网站中移动可拖动表单时,光标出现在表单上方 60 像素处。
可以看到在Chrome调试工具中,在Elements界面,点击<body>
标签,会看到top和body之间有一个空隙。
因为我在整个应用程序中都使用了这个导航栏,并且不想修改我的初始化调用以拖动每个表单(根据 DarthJDG 的过程)。我决定以这种方式扩展可拖动小部件,并在可拖动初始化中简单地添加一个 yOffset。
(function($) {
$.widget("my-ui.draggable", $.ui.draggable, {
_mouseDrag: function(event, noPropagation) {
//Compute the helpers position
this.position = this._generatePosition(event);
this.positionAbs = this._convertPositionTo("absolute");
//Call plugins and callbacks and use the resulting position if something is returned
if (!noPropagation) {
var ui = this._uiHash();
if(this._trigger('drag', event, ui) === false) {
this._mouseUp({});
return false;
}
this.position = ui.position;
}
// Modification here we add yoffset in options and calculation
var yOffset = ("yOffset" in this.options) ? this.options.yOffset : 0;
if(!this.options.axis || this.options.axis != "y") this.helper[0].style.left = this.position.left+'px';
if(!this.options.axis || this.options.axis != "x") this.helper[0].style.top = this.position.top-yOffset+'px';
if($.ui.ddmanager) $.ui.ddmanager.drag(this, event);
return false;
}
});
})(jQuery);
现在,当我使用引导导航栏在站点中初始化可拖动元素/表单时:
// Make the edit forms draggable
$("#org_account_pop").draggable({handle:" .drag_handle", yOffset: 60});
当然,您必须根据自己的站点进行试验以确定正确的 yOffset。
无论如何,感谢 DarthJDG,他为我指明了正确的方向。干杯!