jQuery ลากได้ - จะเกิดอะไรขึ้นหากมีการใช้องค์ประกอบสองครั้ง?

จนกระทั่งเมื่อไม่นานมานี้ ฉันได้ตั้งค่านี้ ซึ่งถูกเรียกหลายครั้ง:

                $('.rsh')
                    .draggable('destroy')                               
                    .draggable({ blah blah details });

destroy อยู่ที่นั่นเพื่อหยุดตัวจัดการแบบลากได้หลายตัวที่สะสมอยู่ในคลาส AJAX กำลังสร้างองค์ประกอบใหม่ และการแนบเริ่มต้นของ draggable ไปยังคลาสจะไม่แตะองค์ประกอบที่สร้างขึ้นในภายหลัง

อย่างไรก็ตาม เมื่อฉันอัปเดต jQuery UI เป็นเวอร์ชัน 1.9.2 มันเริ่มทำให้ฉันมีข้อผิดพลาดนี้:

ข้อผิดพลาด: ไม่สามารถเรียกวิธีการลากได้ก่อนที่จะเริ่มต้น พยายามเรียกวิธีการ 'ทำลาย'

ฉันก็เลยเอาเส้นทำลายออก และมันก็น่ารักดี ยกเว้น... ฉันสงสัยว่าตอนนี้ฉันอาจจะเพิ่มตัวจัดการในชั้นเรียนมากขึ้นเรื่อยๆ (ซึ่งเป็นเหตุผลว่าทำไม destroy ถึงอยู่ที่นั่นตั้งแต่แรก)

ฉันลองสิ่งนี้แล้ว แต่ไม่ชอบ:

if ($('.rsh').length) {
    $('.rsh').draggable('destroy'); 
}

คำถามสองข้อ: (1) จะมีตัวจัดการติดอยู่กับคลาสมากขึ้นเรื่อยๆ ทุกครั้งที่ฉันเริ่มบรรทัดการตั้งค่าแบบลากได้หรือไม่ (2) หากเป็นเช่นนั้น มีวิธีแก้ไขอย่างไรในการลบออก


javascript jquery jquery-ui-draggable
person Nick    schedule 09.01.2013    source แหล่งที่มา

คำตอบ (2)


arrow_upward
6
arrow_downward

ไม่ จะไม่มีการผูกมัดตัวจัดการเพิ่มเติม jQuery ลงทะเบียนอินสแตนซ์ที่เตรียมใช้งานกับองค์ประกอบและจะไม่สร้างอินสแตนซ์ใหม่ของวิดเจ็ตเดียวกันสำหรับองค์ประกอบเดียวกัน

เนื่องจากคุณกังวลเกี่ยวกับตัวจัดการ ต่อไปนี้คือการตรวจสอบอย่างรวดเร็ว (jQuery 1.8+ และ UI 1.9+):

$('div').draggable();
console.log( $._data($('div')[0], 'events') );
$('div').draggable();
console.log( $._data($('div')[0], 'events') );

ซอ

อย่างที่คุณเห็น ออบเจ็กต์ตัวจัดการที่แนบมาจะไม่ถูกเปลี่ยนแปลงหลังจากพยายามเริ่มต้นอินสแตนซ์แบบลากได้ใหม่บนองค์ประกอบเดียวกัน

แก้ไข: การเรียกครั้งต่อๆ ไปพร้อมพารามิเตอร์จะไม่ถูกละเว้น แต่จะขยายวิดเจ็ตที่มีอยู่ตามที่แสดงในคำตอบของ @ Jason Sperske

person Fabrício Matté    schedule 09.01.2013

arrow_upward
5
arrow_downward

การเรียกครั้งต่อไปที่ .draggable() จะขยายการโทรก่อนหน้าเมื่อแนบกับวัตถุเดียวกัน (และไม่ได้แทนที่อย่างที่ฉันคิดไว้ในตอนแรก) ดูตัวอย่างนี้ (ขยายจากของ Fabrício Matté) (demo)

<div>foo</div>
<script>
 $('div').draggable({
  start: function () {
    console.log("drag 1");
  }
 });
 console.log($._data($('div')[0], 'events'));
 $('div').draggable({
  stop: function () {
    console.log("drag 2");
  }
 });
 console.log($._data($('div')[0], 'events'));
</script>

ใน console.log คุณจะเห็นเฉพาะข้อความเหล่านี้:

drag 1 <- on start
drag 2 <- on stop
person Jason Sperske    schedule 09.01.2013
comment
โอ้ เยี่ยมเลย ฉันลืมที่จะพิจารณาการขยายวิดเจ็ตปัจจุบัน +1 สำหรับการเสริมมัน - person Fabrício Matté; 10.01.2013