使用jquery-sortable无法将大项目拖动到最顶层/最底层

前端之家收集整理的这篇文章主要介绍了使用jquery-sortable无法将大项目拖动到最顶层/最底层前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

将大型项目拖动到最顶层或最底层位置时会出现问题.

演示:http://jsfiddle.net/vladimir_ze/b2Q9b/17/

在排序之前(在开始事件上)我减少元素大小以使大型元素的排序变得容易,但似乎计算仍然使用元素原始高度(在我将其设置为较小的大小之前).

任何想法如何解决

更新

我最近在搜索是否可以在启动事件之前更改元素高度时遇到了一个有趣的链接(jQuery UI : Before start draggable),并且事实证明可以使用beforeStart事件扩展sortable.

  1. var oldMouseStart = $.ui.sortable.prototype._mouseStart;
  2. $.ui.sortable.prototype._mouseStart = function (event,overrideHandle,noActivation) {
  3. this._trigger('beforeStart',event,this._uiHash());
  4. oldMouseStart.apply(this,[event,noActivation]);
  5. };

当beforeStart触发时,我应用类来最小化该项,并调用.sortable(‘refresh’).

结果如下:http://jsfiddle.net/vladimir_ze/b2Q9b/18/
它仍然有点马车但如果你从顶部边缘开始拖动它会很好.

最佳答案
这似乎是jquery中的一个错误,已经是logged了.

修复版本将在1.12版本中提供.
同时,您可以按照this link.Working fiddle中的建议将以下代码添加到您的脚本中.

  1. $.widget("ui.sortable",$.extend({},$.ui.sortable.prototype,{
  2. _mouseDrag: function(event) {
  3. var i,item,itemElement,intersection,o = this.options,scrolled = false,touchingEdge;
  4. //Compute the helpers position
  5. this.position = this._generatePosition(event);
  6. this.positionAbs = this._convertPositionTo("absolute");
  7. if (!this.lastPositionAbs) {
  8. this.lastPositionAbs = this.positionAbs;
  9. }
  10. //Do scrolling
  11. if(this.options.scroll) {
  12. if(this.scrollParent[0] !== document && this.scrollParent[0].tagName !== "HTML") {
  13. if((this.overflowOffset.top + this.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity) {
  14. this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop + o.scrollSpeed;
  15. } else if(event.pageY - this.overflowOffset.top < o.scrollSensitivity) {
  16. this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop - o.scrollSpeed;
  17. }
  18. if((this.overflowOffset.left + this.scrollParent[0].offsetWidth) - event.pageX < o.scrollSensitivity) {
  19. this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft + o.scrollSpeed;
  20. } else if(event.pageX - this.overflowOffset.left < o.scrollSensitivity) {
  21. this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft - o.scrollSpeed;
  22. }
  23. } else {
  24. if(event.pageY - $(document).scrollTop() < o.scrollSensitivity) {
  25. scrolled = $(document).scrollTop($(document).scrollTop() - o.scrollSpeed);
  26. } else if($(window).height() - (event.pageY - $(document).scrollTop()) < o.scrollSensitivity) {
  27. scrolled = $(document).scrollTop($(document).scrollTop() + o.scrollSpeed);
  28. }
  29. if(event.pageX - $(document).scrollLeft() < o.scrollSensitivity) {
  30. scrolled = $(document).scrollLeft($(document).scrollLeft() - o.scrollSpeed);
  31. } else if($(window).width() - (event.pageX - $(document).scrollLeft()) < o.scrollSensitivity) {
  32. scrolled = $(document).scrollLeft($(document).scrollLeft() + o.scrollSpeed);
  33. }
  34. }
  35. if(scrolled !== false && $.ui.ddmanager && !o.dropBehavIoUr) {
  36. $.ui.ddmanager.prepareOffsets(this,event);
  37. }
  38. }
  39. //Regenerate the absolute position used for position checks
  40. this.positionAbs = this._convertPositionTo("absolute");
  41. //Set the helper position
  42. if(!this.options.axis || this.options.axis !== "y") {
  43. this.helper[0].style.left = this.position.left+"px";
  44. }
  45. if(!this.options.axis || this.options.axis !== "x") {
  46. this.helper[0].style.top = this.position.top+"px";
  47. }
  48. // Check if the helper is touching the edges of the containment.
  49. if(this.containment) {
  50. if((this.positionAbs.left === this.containment[0] || this.options.axis === "y") &&
  51. (this.positionAbs.top === this.containment[1] || this.options.axis === "x")) {
  52. touchingEdge = 0;
  53. this.direction = "down";
  54. }
  55. else if((this.positionAbs.left === this.containment[2] || this.options.axis === "y") &&
  56. (this.positionAbs.top === this.containment[3] || this.options.axis === "x")) {
  57. touchingEdge = this.items.length - 1;
  58. this.direction = "up";
  59. }
  60. }
  61. if(touchingEdge !== undefined && this.helper[0] !== this.items[touchingEdge].item[0]) {
  62. // Rearrange,if the helper is touching the edge of the containment and not
  63. // already the item at the edge.
  64. this._rearrange(event,this.items[touchingEdge],false);
  65. this._trigger("change",this._uiHash());
  66. } else {
  67. //Rearrange
  68. for (i = this.items.length - 1; i >= 0; i--) {
  69. //Cache variables and intersection,continue if no intersection
  70. item = this.items[i];
  71. itemElement = item.item[0];
  72. intersection = this._intersectsWithPointer(item);
  73. if (!intersection) {
  74. continue;
  75. }
  76. // Only put the placeholder inside the current Container,skip all
  77. // items from other containers. This works because when moving
  78. // an item from one container to another the
  79. // currentContainer is switched before the placeholder is moved.
  80. //
  81. // Without this,moving items in "sub-sortables" can cause
  82. // the placeholder to jitter beetween the outer and inner container.
  83. if (item.instance !== this.currentContainer) {
  84. continue;
  85. }
  86. // cannot intersect with itself
  87. // no useless actions that have been done before
  88. // no action if the item moved is the parent of the item checked
  89. if (itemElement !== this.currentItem[0] &&
  90. this.placeholder[intersection === 1 ? "next" : "prev"]()[0] !== itemElement &&
  91. !$.contains(this.placeholder[0],itemElement) &&
  92. (this.options.type === "semi-dynamic" ? !$.contains(this.element[0],itemElement) : true)
  93. ) {
  94. this.direction = intersection === 1 ? "down" : "up";
  95. if (this.options.tolerance === "pointer" || this._intersectsWithSides(item)) {
  96. this._rearrange(event,item);
  97. } else {
  98. break;
  99. }
  100. this._trigger("change",this._uiHash());
  101. break;
  102. }
  103. }
  104. }
  105. //Post events to containers
  106. this._contactContainers(event);
  107. //Interconnect with droppables
  108. if($.ui.ddmanager) {
  109. $.ui.ddmanager.drag(this,event);
  110. }
  111. //Call callbacks
  112. this._trigger("sort",this._uiHash());
  113. this.lastPositionAbs = this.positionAbs;
  114. return false;
  115. }
  116. }));

猜你在找的jQuery相关文章