jquery ปัญหาความสูงของตัวยึดตำแหน่งที่เรียงลำดับได้

94

ด้วยเหตุผลบางประการตัวยึดสำหรับรายการที่จัดเรียงได้ของฉันมีขนาดประมาณ 10px รายการที่จัดเรียงได้ทั้งหมดของฉันมีความสูงต่างกัน ฉันจะเปลี่ยนความสูงของตัวยึดตำแหน่งแต่ละตัวให้ตรงกับรายการที่กำลังย้ายได้อย่างไร

jquery jquery-ui jquery-ui-sortable

— oshirowanen
แหล่งที่มา

โพสต์ลง jsFiddle ได้ไหม

— Satish

เหตุการณ์นี้เกิดขึ้นเมื่อคุณลากและวางรายการของคุณไปที่อื่นหรือไม่ หรือสินค้ามีความสูงแล้วหลังจากโหลดหน้า? ลองดูที่นี่: bugs.jqueryui.com/ticket/4482และพยายามแก้ไขปัญหาตามที่กล่าวไว้

— โมฮัมหมัด

254

ฉันมักจะแก้ปัญหานี้โดยผูกการเรียกกลับที่กำหนดความสูงของตัวยึดกับความสูงของรายการที่จัดเรียงให้กับstartเหตุการณ์ เป็นวิธีง่ายๆที่ให้คุณควบคุมได้ละเอียดว่าคุณต้องการให้ตัวยึดตำแหน่งของคุณแสดงอย่างไร

$( ".column" ).sortable({
    connectWith: ".column",
    start: function(e, ui){
        ui.placeholder.height(ui.item.height());
    }
});

ดู กรณีทดสอบที่อัปเดต

— mekwall
แหล่งที่มา

22

โดยส่วนตัวฉันต้องแทนที่ ui.item.height () ด้วย ui.helper.outerHeight () เนื่องจากปัญหาบางอย่างเกี่ยวกับระยะขอบและช่องว่างภายในที่ทำให้ความสูงที่แท้จริงขององค์ประกอบ

— oshikryu

ขอโทษ แต่ฉันคิดว่ามันใช้งานได้ไม่ดีในลิงค์นี้jsfiddle.net/t8gcZ/1ความสูงของตัวยึดจะเท่ากับความสูงของรายการ (237px) แต่เมื่อถึงเวลาเริ่มต้นเราจะเห็นรายการที่อยู่ด้านล่างย้ายขึ้นครอก

— Makio

1

@ Makio นั่นเป็นเพราะเบาะรองด้านล่าง การเพิ่มช่องว่างด้านล่างลงในตัวยึดจะช่วยแก้ปัญหานี้ได้ jsfiddle.net/t8gcZ/136

— mekwall

16

คุณลองตั้งค่าforcePlaceholderSize:trueคุณสมบัติแล้วหรือยัง? ได้อ่านบน jQuery UI การจัดเรียงหน้าเอกสาร

— ดาร์ ธ เจดีจี
แหล่งที่มา

2

ฉันได้ลองแล้ว แต่การเพิ่มจริงหรือเท็จไม่ได้สร้างความแตกต่างให้กับไซต์เดิมของฉันซึ่งทำให้ไซต์เดิมมีความสูง 10px ใน jsfiddle นี้จะปรับขนาดได้อย่างถูกต้อง แต่บังคับให้ตั้งค่าเป็นจริงหรือเท็จไม่แตกต่างกัน jsfiddle.net/t8gcZ

— oshirowanen

@oshirowanen: คุณกำลังทดสอบเบราว์เซอร์อะไรอยู่?

— DarthJDG

@oshirowanen: ช่วยโพสลิงค์โค้ดที่มันเสียได้ไหม

— DarthJDG

2

ที่ได้ผลสำหรับฉัน สิ่งที่ฉันต้องทำคือเปลี่ยน CSS .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }เป็น.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; }(ลบความสูง) ดังนั้น @DarthJDG คุณพูดถูก!

— JP Hellemons

@JPHellemons ที่ใช้งานได้ก็ต่อเมื่อความสูงไม่ใช่แบบไดนามิก

— Erdal G.

2

องค์ประกอบของคุณdisplay: blockหรือไม่ องค์ประกอบแบบอินไลน์อาจทำให้ตัวยึดตำแหน่งรักษาความสูงไม่ถูกต้อง เช่น. jsFiddle นี้ดูเหมือนจะมีปัญหาคล้ายกับที่คุณอธิบายไว้ การเพิ่มdisplay: blockลงใน.portletคลาสจะช่วยแก้ไขได้

— Gijs
แหล่งที่มา

เช่นเดียวกันกับองค์ประกอบลอย หากองค์ประกอบรายการลอยตัวตัวยึดก็ควรลอยด้วยเช่นกัน

— Adrian Marinica

2

แทนที่จะใช้ "ui.item.height ()" คุณสามารถใช้ "ui.helper [0] .scrollHeight" เพื่อให้ผลลัพธ์คงที่เมื่อลากรายการจากคอนเทนเนอร์ภายนอกได้เช่นกัน

$( ".column" ).sortable({
    connectWith: ".column",
    start: function(e, ui){
        ui.placeholder.height(ui.helper[0].scrollHeight);
    }
});

— Elanchezhian Narayanasamy
แหล่งที่มา

1

คุณสามารถกำหนดสไตล์สำหรับตัวยึดตำแหน่งของคุณเป็นตัวเลือกสำหรับการจัดเรียงของคุณ

$( "#sortable" ).sortable({
        placeholder: "ui-state-highlight"
});

และให้สไตล์นั้นสูง หวังว่าจะได้ผล

— MANATTWeb
แหล่งที่มา

2

แต่นั่นจะไม่สามารถแก้ไขความสูงได้หรือไม่? ฉันต้องการความสูงเพื่อให้เหมือนกับเนื้อหา

— oshirowanen

1

ในกรณีของฉันฉันพบวิธีแก้ปัญหาที่คล้ายกับJP Hellemonsซึ่งฉันกำลังบังคับให้ความสูงของตัวยึด (ด้วย! important ) เป็นแบบกำหนดเองและยังตั้งค่าการมองเห็นด้วยพื้นหลังเพื่อดูการเปลี่ยนแปลงสำหรับตัวฉันเอง (คุณสามารถจัดสไตล์ด้วยตัวยึดตำแหน่งของคุณได้ทุกที่ที่คุณต้องการ ).

ซึ่งใช้งานได้กับ display: inline-block;

.ui-sortable-placeholder { 
     background:red !important; 
     height: 2px !important; // this is the key, set your own height, start with small
     visibility: visible !important;
     margin: 0 0 -10px 0; // additionaly, you can position your placeholder, 
     }                    // in my case it was bottom -10px

— ผู้ใช้ 3780666
แหล่งที่มา