jQuery क्रमबद्ध तालिका की चौड़ाई रखें

Question

खींचने वाले तत्व के दौरान तालिका की चौड़ाई रखने के लिए jquery के क्रमबद्ध करने के लिए एक आसान समाधान नहीं मिला, बल तालिका वास्तव में इस समय काम नहीं कर रहा है, अगर तालिका में कुछ बड़ा तत्व है - यदि मैं इसे खींचना शुरू करता हूं तो तालिका आकृति परिवर्तन अभी भी-इन-तालिका तत्व की अधिकतम चौड़ाई है, तो यहाँ क्या मेरे द्वारा की गई है:

jQuery("#sortable1").sortable({ 
    items: "tbody:not([not-sortable])", 
    cursor: "move", 
    zIndex: 9999, 
    start: function (event, ui) { 
     var colW = jQuery(".faq_glyph_owner").width(); 
     self.textWidth = ui.item.innerWidth() - colW * 3; 
     jQuery(".faq_text").width(self.textWidth); 
     jQuery("#sortable1").css("table-layout", "fixed"); 
     ui.item.find("div").parent().width(self.textWidth + colW); 
    }, 
    stop: function (event, ui) { 
     jQuery("#sortable1").css("table-layout", "auto"); 
    } 
}); 

तो मैं आम तौर पर सिर्फ आकार भरोसा कर रहा हूँ के रूप में यह हो सकता है और, मेज पर निश्चित लेआउट लागू here is sample of this with table करने की अपेक्षा की। तो मेरा सवाल है: सॉर्टिंग के दौरान टेबल चौड़ाई रखने के लिए कोई अंतर्निहित तरीका है, जैसे ड्रैग किया गया तत्व अभी भी तालिका के अंदर है? कृपया ध्यान दें कि मैं तालिका के लेआउट को निश्चित नहीं रखना चाहता हूं।

पीएस कृपया 'jQuery' को अनदेखा करें, हमारे पास अभी भी विरासत प्रोटोटाइप कोड है जो

Answer 1

यह कोड है जिसका उपयोग मैं इसके लिए करता हूं। मैं एक सहायक फ़ंक्शन बनाता हूं जो पंक्ति में सबकुछ की ऊंचाई और चौड़ाई प्राप्त करता है और फिर स्पष्ट रूप से इसे ऊंचाइयों और चौड़ाई पर सेट करता है, साथ ही प्लेसहोल्डर के रूप में एक पंक्ति को जोड़ता है।

var fixHelper = function (e, ui) { 
    ui.children().each(function() { 
     if ($(this).children().length > 0) { 
      fixHelper(e, $(this)); 
     } 
     if(parseInt($(this).css("margin-left")) != 0) 
      $(this).css("margin-left", $(this).css("margin-left")); 

     if (parseInt($(this).css("margin-right")) != 0) 
      $(this).css("margin-right", $(this).css("margin-right")); 

     $(this).width($(this).realWidth(true)); 
     $(this).height($(this).realHeight(true)); 
    }); 

    ui.height(ui.realHeight()); 
    return ui; 
}; 

var unfixHelper = function (ui) { 
    ui.children().each(function() { 
     if ($(this).children().length > 0) { 
      unfixHelper($(this)); 
     } 
     $(this).css("margin-left", ""); 
     $(this).css("margin-right", ""); 
     $(this).css("width", ""); 
     $(this).css("height", ""); 
    }); 
    ui.css("height", ""); 
}; 


var sortableOptions = new Object({ 
    items: "tbody:not([not-sortable])", 
    cursor: "move", 
    zIndex: 9999, 
    helper: fixHelper, 
    start: function (e, ui) { 
     ui.placeholder.height(ui.item.height()); 
     ui.placeholder.html("<td colspan=\"10\">&nbsp;</td>"); 
    }, 
    stop: function (e, ui) { 
     unfixHelper(ui.item); 
     ui.placeholder.html(""); 
    } 
}); 

jQuery("#sortable1").sortable(sortableOptions); 

एक और फ़ाइल (वास्तविक dimensions.js): एक विकल्प sortable विजेट में helper बुलाया

$.fn.realWidth = function (inner) { 
    var $t = $(this); 
    var rect = this[0].getBoundingClientRect(); 

    var width; 
    if (rect.width) { 
     // `width` is available for IE9+ 
     width = rect.width; 

    } else { 
     // Calculate width for IE8 and below 
     width = rect.right - rect.left; 
    } 

    if (inner) 
     width -= parseInt($t.css("padding-left")) + parseInt($t.css("padding-right")); 

    return width; 
} 

$.fn.realHeight = function (inner) { 
    var $t = $(this); 
    var rect = this[0].getBoundingClientRect(); 

    var height; 
    if (rect.height) { 
     // `height` is available for IE9+ 
     height = rect.height; 
    } else { 
     // Calculate height for IE8 and below 
     height = rect.top - rect.bottom; 
    } 

    if (inner) 
     height -= parseInt($t.css("padding-top")) + parseInt($t.css("padding-bottom")); 

    return height; 
} 

Answer 2

नहीं है। इसका उद्देश्य ड्रैगिंग डिस्प्ले एक्शन में कुछ व्यवहार जोड़ना है। संशोधन के प्रासंगिक हिस्सा है:

jQuery('#sortable1').sortable({ 
    helper: fixedWidth 
}); 

function fixedWidth(e, ui) { 
    var max_w = 0; 
    // get the max width from all the children 
    ui.children().each(function() { 
     var w = $(this).width(); 
     if (w > max_w) max_w = w; 
    }); 
    // set the width of the table to be the max 
    $('#sortable1').width(max_w); 
    return ui; 
} 

एक पूर्ण कार्यान्वयन इस JSFiddle में पाया जा सकता। मुझे इस blog से प्रेरणा मिली।

इसके अलावा, अगर आप मेरी राय मानते हैं, तो मैं <table> के बजाय <ul> का उपयोग करके, इस संरचना को एक सरल तरीके से बनाउंगा। this की तरह। निश्चित चौड़ाई रखने के लिए आपको केवल <ul> शैली बनाना होगा।

Answer 3

var fixHelper = function(e, ui) { 
    ui.children().each(function() { 
    console.log(e); 
    $(this).width($(this).width()); 
    }); 
    return ui; 
}; 

$("#sortable1 tbody").sortable({ 
    helper: fixHelper 
}).disableSelection(); 

JSfiddle

Source article

Answer 4

कैसे इस बारे में:

$("#sortable1").sortable({ 
     items: "tbody:not([not-sortable])", 
     helper: 'clone', 
     cursor: "move", 
     zIndex: 9999, 
     start: function (event, ui) { 
      $(ui.item[0]).show().css('opacity','0'); 
     }, 
     stop: function (event, ui) { 
      $(ui.item[0]).css('opacity','1'); 
     } 
    }); 

आप मूल रूप से तत्व क्लोनिंग कर रहे हैं और इसके बजाय यह जबकि आगे बढ़ छुपाने का, तो आप सिर्फ 0 और उसके बाद की opacity लागू एक बार गिराए गए opacity को लागू करने के बाद। मेरे पास वास्तव में परीक्षण करने का समय नहीं था।