`
flex_莫冲
  • 浏览: 1095702 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

jquery ui sortable scroll=true卻無法滾動的解決辦法

阅读更多
用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 sortable jquery ui sortable是一种基于jquery ui库的插件,它为DOM元素提供了一个强大的拖放界面,可以实现列表和网格的拖拽排序。通过jquery ui sortable,用户可以轻松地对页面上的...

    ui.sortable.js

    jquery ui sortable 结合jquery ui.core使用

    jqueryUi的拖拽排序插件 jquery-ui-sortable.js

    jqueryUI拖拽排序插件,单独的插件,可以独立使用!不必引入整个jqueryUi框架就可使用

    经过修改,适合bootstrap table拖动排序的jQuery-UI sortable

    经过修改,适合bootstrap table拖动排序的jQuery-UI sortable

    jquery-ui.css、jquery-ui.js下载

    jQuery UI是基于JavaScript库jQuery的一个扩展,它提供了一系列丰富的用户界面组件,包括但不限于对话框(Dialogs)、日期选择器(Datepickers)、拖放功能(Drag and Drop)、排序功能(Sortable)以及各种可自定义...

    jQuery UI组件 jQuery UI

    **jQuery UI组件详解** jQuery UI 是一个强大的前端开发框架,基于流行的JavaScript库jQuery构建,它提供了丰富的用户界面组件,能够帮助开发者快速构建交互性、视觉吸引力强的网页应用。jQuery UI 包含了大量的...

    div拖动排序插件jquery.sortable.zip

    首先,jQuery Sortable是jQuery UI库的一部分,提供了丰富的拖放排序功能。要使用这个插件,你需要先在项目中引入jQuery和jQuery UI的库文件。通常,这包括引入以下两行代码: ```html &lt;script src=...

    jquery ui & themes

    《jQuery UI与主题设计详解》 在Web开发领域,jQuery UI是一个强大且广泛使用的JavaScript库,它基于jQuery核心库,提供了丰富的用户界面组件和交互效果。jQuery UI的主要目标是简化前端开发,通过提供一系列可定制...

    jquery sortable 拖拽效果 源码

    在本文中,我们将深入探讨jQuery Sortable插件,这是一个用于实现HTML元素拖放排序功能的JavaScript库。...无论是在管理列表、构建交互式画廊还是组织复杂布局,jQuery Sortable都是一个值得信赖的解决方案。

    JQueryUI,EasyUI一些控件的使用

    在本文中,我们将深入探讨JQueryUI和EasyUI这两个JavaScript库在创建用户界面时的一些关键控件和功能,包括表单、Tab切换以及样式切换。它们都是为了提升Web应用程序的用户体验和交互性而设计的。 首先,让我们了解...

    jquery.simulate.drag-sortable.js:在JQuery UI Sortable小部件内模拟拖动事件(主要用于集成测试)

    在JQuery UI Sortable上模拟拖动尽管提供了模拟许多JQuery和JQuery UI事件的功能,但由于使JQuery UI Sortable小部件触发正确事件所需的复杂行为,因此它无法为JQuery UI Sortable小部件模拟拖动事件。 这个库允许您...

    ,jqueryui jquery ui包 效果不错,只是为了自己保存

    **jQuery UI:一个强大的前端开发工具包** jQuery UI是一个基于jQuery JavaScript库的扩展,它提供了一整套可交互的用户界面组件,包括对话框、拖放功能、日期选择器、进度条、排序列表等。这个名为"jquery-ui-...

    Jquery Ui 后台模板界面

    jQuery UI 包含了多种功能强大的组件,如对话框(Dialog)、日期选择器(Datepicker)、拖放(Draggable)、可排序(Sortable)以及各种类型的下拉菜单和按钮等,这些组件极大地提高了后台操作的便捷性和用户体验。...

    最新jQueryUI组件下载

    jQuery UI 是一个强大的开源库,它是基于 jQuery JavaScript 库构建的,提供了丰富的用户界面组件,如日期选择器、对话框、拖放功能、排序列表等。这个“最新jQueryUI组件下载”应该指的是版本号为1.10.0的jQuery UI...

    jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css

    **jQuery UI** 是一个强大的JavaScript库,用于构建用户界面,它基于流行的jQuery库。这个压缩包包含两个关键文件:`jquery-ui-1.8.16.custom.min.js` 和 `jquery-ui-1.8.16.custom.css`,这些都是jQuery UI的特定...

    Jquery Sortable实现div拖动排序效果

    jQuery 是一个广泛使用的JavaScript库,而 jQuery UI 提供了包括Sortable在内的多种交互功能。可以通过以下方式在HTML文件中添加它们的CDN链接: ```html &lt;script src=...

    jquery ui jquery ui

    7. **JQuery实战视频教程**:SRC&PPT 文件可能包含了实际操作教程,涵盖了jQuery UI的使用方法、实例分析和常见问题解决。通过观看这些教程,开发者可以快速上手并掌握jQuery UI的实际应用技巧。 在实际开发中,...

    jQueryUI API文档资料

    jQuery UI 是一个基于 jQuery ...总之,jQuery UI是一个强大的工具,为Web开发提供了丰富的用户界面解决方案。通过深入理解并熟练运用其API文档中的知识点,开发者可以构建出具有专业级用户体验的交互式网页。

Global site tag (gtag.js) - Google Analytics