用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.core使用
jqueryUI拖拽排序插件,单独的插件,可以独立使用!不必引入整个jqueryUi框架就可使用
经过修改,适合bootstrap table拖动排序的jQuery-UI sortable
主要为大家详细介绍了jquery ui sortable拖拽后保存位置的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
在JQuery UI Sortable上模拟拖动尽管提供了模拟许多JQuery和JQuery UI事件的功能,但由于使JQuery UI Sortable小部件触发正确事件所需的复杂行为,因此它无法为JQuery UI Sortable小部件模拟拖动事件。 这个库允许您...
div拖动排序插件jquery.sortable是一款使用jquery的Sortable函数实现的div的拖动排序效果,可实现与后台的交互。
jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。 编辑本段组件构成 jQuery UI ...
jquery-sortable-lists, 用于排序列表的jQuery插件还包括树结构 jquery-sortable-lists用于排序列表的插件还包括树结构。$('#myList').sortableLists( options );你可以通过鼠标对html列表的项进行排序。 创建树结构...
react-jquery-ui-sortable 具有jQuery UI Sortable的React组件示例主要思想在components/SortableList.js::componentDidMount() componentDidMount: function ( ) { var ul = findDOMNode ( this ) ; ul = $ ( ul ) ...
下面小编就为大家带来一篇jQueryUI Sortable 应用Demo(分享)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
请注意,此模块旨在与ui.sortable一起ui.sortable ,并且可能无法与依赖jQuery的任何其他脚本一起使用。 安装 在页面中包括Angular, 和或 。 您可以使用npm,bower或脚本标签: npm install angular-ui-sortable-...
jquery_ui 菜单排序后同步更新数据库例子,主要是使用了sortable('serialize');来实现,开始试了好久都没弄明白,但后来才发现复杂,看看这个例子就明白了,用途很多呢。 本人是用于微信平台自定义菜单和多图文排序用...
Jquery Sortable实现div拖动排序效果 Jquery Sortable实现div拖动排序效果
jquery sortable 拖拽效果 源码
最新官方jQuery UI插件 主流特效Demo,绝不含糊。 好东西不需要过多的言辞修饰,下了就知道! 所有效果说明: 基本的鼠标互动: 拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种...
jQuery可排序照片jQuery Sortable Photos是jQuery UI插件,可以在响应式,可排序的网格中显示照片。 相片网格的排列方式应使每行中图像的高度一致,并调整图像大小以填充整个宽度。 可以选择将网格配置为允许拖放...
ul class="sortable"> li>Item 1 li>Item 2 li>Item 3 li>Item 4 ul> script src="jquery.sortable.js">script> script> $('.sortable').sortable(); script> API 兼容 jQuery-UI: yepnope({ ...
jquery.ui.min~draggble~droppable~sortable.js draggble~droppable~sortable 这三个都是难找的资源 界面拖拽或智能选择功能必备插件 一次性放出来...