用jquery ui 做sortable功能時經常碰到設置了scroll=true,滾動條卻無法滾動的情況。
核心的代碼是
_mouseDrag: function(event) {
var i, item, itemElement, intersection,
o = this.options,
scrolled = false;
//Compute the helpers position
this.position = this._generatePosition(event);
this.positionAbs = this._convertPositionTo("absolute");
if (!this.lastPositionAbs) {
this.lastPositionAbs = this.positionAbs;
}
//Do scrolling
if(this.options.scroll) {
if(this.scrollParent[0] !== document && this.scrollParent[0].tagName !== "HTML") {
if((this.overflowOffset.top + this.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity) {
this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop + o.scrollSpeed;
} else if(event.pageY - this.overflowOffset.top < o.scrollSensitivity) {
this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop - o.scrollSpeed;
}
if((this.overflowOffset.left + this.scrollParent[0].offsetWidth) - event.pageX < o.scrollSensitivity) {
this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft + o.scrollSpeed;
} else if(event.pageX - this.overflowOffset.left < o.scrollSensitivity) {
this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft - o.scrollSpeed;
}
} else {
if(event.pageY - $(document).scrollTop() < o.scrollSensitivity) {
scrolled = $(document).scrollTop($(document).scrollTop() - o.scrollSpeed);
} else if($(window).height() - (event.pageY - $(document).scrollTop()) < o.scrollSensitivity) {
scrolled = $(document).scrollTop($(document).scrollTop() + o.scrollSpeed);
}
if(event.pageX - $(document).scrollLeft() < o.scrollSensitivity) {
scrolled = $(document).scrollLeft($(document).scrollLeft() - o.scrollSpeed);
} else if($(window).width() - (event.pageX - $(document).scrollLeft()) < o.scrollSensitivity) {
scrolled = $(document).scrollLeft($(document).scrollLeft() + o.scrollSpeed);
}
}
if(scrolled !== false && $.ui.ddmanager && !o.dropBehaviour) {
$.ui.ddmanager.prepareOffsets(this, event);
}
}
//Regenerate the absolute position used for position checks
this.positionAbs = this._convertPositionTo("absolute");
//Set the helper position
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+"px";
}
//Rearrange
for (i = this.items.length - 1; i >= 0; i--) {
//Cache variables and intersection, continue if no intersection
item = this.items[i];
itemElement = item.item[0];
intersection = this._intersectsWithPointer(item);
if (!intersection) {
continue;
}
// Only put the placeholder inside the current Container, skip all
// items form other containers. This works because when moving
// an item from one container to another the
// currentContainer is switched before the placeholder is moved.
//
// Without this moving items in "sub-sortables" can cause the placeholder to jitter
// beetween the outer and inner container.
if (item.instance !== this.currentContainer) {
continue;
}
// cannot intersect with itself
// no useless actions that have been done before
// no action if the item moved is the parent of the item checked
if (itemElement !== this.currentItem[0] &&
this.placeholder[intersection === 1 ? "next" : "prev"]()[0] !== itemElement &&
!$.contains(this.placeholder[0], itemElement) &&
(this.options.type === "semi-dynamic" ? !$.contains(this.element[0], itemElement) : true)
) {
this.direction = intersection === 1 ? "down" : "up";
if (this.options.tolerance === "pointer" || this._intersectsWithSides(item)) {
this._rearrange(event, item);
} else {
break;
}
this._trigger("change", event, this._uiHash());
break;
}
}
//Post events to containers
this._contactContainers(event);
//Interconnect with droppables
if($.ui.ddmanager) {
$.ui.ddmanager.drag(this, event);
}
//Call callbacks
this._trigger("sort", event, this._uiHash());
this.lastPositionAbs = this.positionAbs;
return false;
},
若 if((this.overflowOffset.top + this.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity) {...}
這裏的 this.scrollParent[0].offsetHeight返回的是undefined,就會導致無法scroll的問題。由於我用了jquery mobile 的框架。會默認給body加上jm的class,例如overflow:hidden,會導致無法獲取offsetHeight.解決辦法,就是將 this.scrollParent[0]的所有會影響到獲取offsetHeight的class都刪掉,就可以解決drag滾動條無法滾動的問題了。
分享到:
相关推荐
jQuery UI 排序(Sortable)
知识点一:什么是jquery ui sortable jquery ui sortable是一种基于jquery ui库的插件,它为DOM元素提供了一个强大的拖放界面,可以实现列表和网格的拖拽排序。通过jquery ui sortable,用户可以轻松地对页面上的...
jquery ui sortable 结合jquery ui.core使用
jqueryUI拖拽排序插件,单独的插件,可以独立使用!不必引入整个jqueryUi框架就可使用
经过修改,适合bootstrap table拖动排序的jQuery-UI sortable
**jQuery UI组件详解** jQuery UI 是一个强大的前端开发框架,基于流行的JavaScript库jQuery构建,它提供了丰富的用户界面组件,能够帮助开发者快速构建交互性、视觉吸引力强的网页应用。jQuery UI 包含了大量的...
jQuery UI是基于JavaScript库jQuery的一个扩展,它提供了一系列丰富的用户界面组件,包括但不限于对话框(Dialogs)、日期选择器(Datepickers)、拖放功能(Drag and Drop)、排序功能(Sortable)以及各种可自定义...
首先,jQuery Sortable是jQuery UI库的一部分,提供了丰富的拖放排序功能。要使用这个插件,你需要先在项目中引入jQuery和jQuery UI的库文件。通常,这包括引入以下两行代码: ```html <script src=...
《jQuery UI与主题设计详解》 在Web开发领域,jQuery UI是一个强大且广泛使用的JavaScript库,它基于jQuery核心库,提供了丰富的用户界面组件和交互效果。jQuery UI的主要目标是简化前端开发,通过提供一系列可定制...
在本文中,我们将深入探讨jQuery Sortable插件,这是一个用于实现HTML元素拖放排序功能的JavaScript库。...无论是在管理列表、构建交互式画廊还是组织复杂布局,jQuery Sortable都是一个值得信赖的解决方案。
在本文中,我们将深入探讨JQueryUI和EasyUI这两个JavaScript库在创建用户界面时的一些关键控件和功能,包括表单、Tab切换以及样式切换。它们都是为了提升Web应用程序的用户体验和交互性而设计的。 首先,让我们了解...
在JQuery UI Sortable上模拟拖动尽管提供了模拟许多JQuery和JQuery UI事件的功能,但由于使JQuery UI Sortable小部件触发正确事件所需的复杂行为,因此它无法为JQuery UI Sortable小部件模拟拖动事件。 这个库允许您...
**jQuery UI:一个强大的前端开发工具包** jQuery UI是一个基于jQuery JavaScript库的扩展,它提供了一整套可交互的用户界面组件,包括对话框、拖放功能、日期选择器、进度条、排序列表等。这个名为"jquery-ui-...
jQuery UI 包含了多种功能强大的组件,如对话框(Dialog)、日期选择器(Datepicker)、拖放(Draggable)、可排序(Sortable)以及各种类型的下拉菜单和按钮等,这些组件极大地提高了后台操作的便捷性和用户体验。...
jQuery UI 是一个强大的开源库,它是基于 jQuery JavaScript 库构建的,提供了丰富的用户界面组件,如日期选择器、对话框、拖放功能、排序列表等。这个“最新jQueryUI组件下载”应该指的是版本号为1.10.0的jQuery UI...
**jQuery UI** 是一个强大的JavaScript库,用于构建用户界面,它基于流行的jQuery库。这个压缩包包含两个关键文件:`jquery-ui-1.8.16.custom.min.js` 和 `jquery-ui-1.8.16.custom.css`,这些都是jQuery UI的特定...
jQuery 是一个广泛使用的JavaScript库,而 jQuery UI 提供了包括Sortable在内的多种交互功能。可以通过以下方式在HTML文件中添加它们的CDN链接: ```html <script src=...
7. **JQuery实战视频教程**:SRC&PPT 文件可能包含了实际操作教程,涵盖了jQuery UI的使用方法、实例分析和常见问题解决。通过观看这些教程,开发者可以快速上手并掌握jQuery UI的实际应用技巧。 在实际开发中,...
jQuery UI 是一个基于 jQuery ...总之,jQuery UI是一个强大的工具,为Web开发提供了丰富的用户界面解决方案。通过深入理解并熟练运用其API文档中的知识点,开发者可以构建出具有专业级用户体验的交互式网页。