बड़ी वस्तु को शीर्ष/नीचे सबसे ज्यादा jquery-sortable

Question

के साथ खींचें नहीं जा सकता है बड़ी वस्तुओं को शीर्ष-सबसे या नीचे-अधिकांश स्थितियों में खींचने के साथ कोई समस्या है।

डेमो: http://jsfiddle.net/vladimir_ze/b2Q9b/17/

(start घटना पर) छँटाई मैं कमी तत्व आकार छँटाई बड़े तत्वों आसान बनाने के लिए, लेकिन यह है कि गणना अभी भी तत्व मूल ऊंचाई के साथ किया (इससे पहले कि मैं यह छोटे आकार के लिए सेट) लगता है इससे पहले कि ।

कोई विचार यह कैसे हल करें?

अपडेट किया गया

मैं एक दिलचस्प लिंक (jQuery UI : Before start draggable) अगर मैं start घटना से पहले तत्व ऊंचाई बदल सकते हैं के लिए खोज हाल ही में जबकि भर में आया, और यह पता चला है यह beforeStart घटना के साथ sortable विस्तार किया जाना संभव।

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

beforeStart आग मैं आइटम को कम करने और भी .sortable('refresh') करने के लिए एक कॉल करने के लिए वर्ग लागू है।

यहां परिणाम है: http://jsfiddle.net/vladimir_ze/b2Q9b/18/ यह अभी भी थोड़ी छोटी है लेकिन यदि आप शीर्ष किनारे से खींचना शुरू करते हैं तो यह अच्छा काम करता है।

Answer 1

यह jquery में एक बग प्रतीत होता है जो पहले से ही logged है।

इसके लिए फिक्स संस्करण 1.12 में उपलब्ध होगा। इस बीच आप नीचे दिए गए कोड को अपनी स्क्रिप्ट में this लिंक में प्रस्तावित कर सकते हैं। वर्किंग fiddle।

$.widget("ui.sortable", $.extend({}, $.ui.sortable.prototype, { 
_mouseDrag: function(event) { 
    var i, item, itemElement, intersection, 
     o = this.options, 
     scrolled = false, 
     touchingEdge; 

    //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"; 
    } 

    // Check if the helper is touching the edges of the containment. 
    if(this.containment) { 
     if((this.positionAbs.left === this.containment[0] || this.options.axis === "y") && 
       (this.positionAbs.top === this.containment[1] || this.options.axis === "x")) { 
      touchingEdge = 0; 
      this.direction = "down"; 
     } 
     else if((this.positionAbs.left === this.containment[2] || this.options.axis === "y") && 
       (this.positionAbs.top === this.containment[3] || this.options.axis === "x")) { 
      touchingEdge = this.items.length - 1; 
      this.direction = "up"; 
     } 
    } 

    if(touchingEdge !== undefined && this.helper[0] !== this.items[touchingEdge].item[0]) { 
     // Rearrange, if the helper is touching the edge of the containment and not 
     // already the item at the edge. 
     this._rearrange(event, this.items[touchingEdge], false); 
     this._trigger("change", event, this._uiHash()); 
    } else { 
     //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 from 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; 

} 
}));