@andrewtimberlake {{#each range key="@index" as |value idx|}} का उपयोग करके ऐसा लगता है कि समस्या को हल करता है।

लेकिन यह बग जैसा लगता है, key एक अलग उद्देश्य के लिए है, https://www.emberjs.com/api/ember/release/classes/Ember.Templates.helpers/methods/if?chchor= से प्रत्येक

मुझे लगता है कि मुझे पता है कि यहां क्या हो रहा है। यह गंदगी का mess है, लेकिन मैं इसका वर्णन करने की कोशिश करूंगा। बहुत सारे किनारे के मामलों (सीमा रेखा उपयोगकर्ता-त्रुटि) ने इसमें योगदान दिया, और मुझे वास्तव में यकीन नहीं है कि क्या है / बग नहीं है, इनमें से किसी को क्या और कैसे ठीक करना है।

प्रमुख 🔑

सबसे पहले, मुझे यह वर्णन करने की आवश्यकता है कि key पैरामीटर {{#each}} । टीएल; डीआर यह निर्धारित करने की कोशिश कर रहा है कि मौजूदा डोम का पुन: उपयोग करने के लिए कब और क्या इसका मतलब होगा, बनाम खरोंच से डोम का निर्माण करना।

हमारे उद्देश्य के लिए, एक दिए गए के रूप में स्वीकार करते हैं कि "टचिंग डोम" (जैसे एक पाठ नोड की सामग्री को अपडेट करना, एक विशेषता, सामग्री को जोड़ना या निकालना आदि) महंगा है और जितना संभव हो उतना बचा जाना चाहिए।

चलो टेम्पलेट के बजाय सरल टुकड़े पर ध्यान केंद्रित करते हैं:

<ul>
  {{#each this.names as |name|}}
    <li>{{name.first}} {{to-upper-case name.last}}</li>
  {{/each}}
</ul>

यदि this.names है ...

[
  { first: "Yehuda", last: "Katz" },
  { first: "Tom", last: "Dale" },
  { first: "Godfrey", last: "Chan" }
]

तब आपको मिलेगा ...

<ul>
  <li>Yehuda KATZ</li>
  <li>Tom DALE</li>
  <li>Godfrey CHAN</li>
</ul>

अब तक सब ठीक है।

सूची में एक आइटम लागू करना

अब क्या होगा अगर हम सूची में { first: "Andrew", last: "Timberlake" } जोड़ दें? हम उम्मीद करेंगे कि निम्नलिखित DOM का निर्माण करने के लिए टेम्पलेट:

<ul>
  <li>Yehuda KATZ</li>
  <li>Tom DALE</li>
  <li>Godfrey CHAN</li>
  <li>Andrew TIMBERLAKE</li>
</ul>

पर कैसे_?

{{#each}} सहायक को लागू करने का सबसे भोला तरीका हर बार सूची की सामग्री को बदलने के बाद सूची की सभी सामग्री को साफ़ कर देगा। ऐसा करने के लिए आपको कम से कम 23 संचालन की आवश्यकता होगी:

• 3 <li> नोड निकालें
• 4 <li> नोड डालें
• 12 टेक्स्ट नोड्स डालें (पहले नाम के लिए एक, बीच के स्पेस के लिए एक और अंतिम नाम के लिए एक, 4 पंक्तियों का)
• 4 बार to-upper-case सहायक का आह्वान करें

ऐसा लगता है ... बहुत अनावश्यक और महंगा है। हम _know_ पहले तीन आइटम नहीं बदले, इसलिए यह अच्छा होगा यदि हम उन पंक्तियों के लिए काम छोड़ सकते हैं।

Ex @index

एक बेहतर कार्यान्वयन मौजूदा पंक्तियों का पुन: उपयोग करने का प्रयास करना होगा और कोई भी अनावश्यक अपडेट नहीं करना चाहिए। एक विचार केवल टेम्प्लेट में अपनी स्थिति के साथ पंक्तियों को मिलाना होगा। यह अनिवार्य रूप से key="@index" करता है:

1. पहली पंक्ति के साथ पहली वस्तु { first: "Yehuda", last: "Katz" } तुलना करें, <li>Yehuda KATZ</li> :
   1.1। "येहुदा" === "येहुदा", कुछ नहीं करना है
   1.2। (अंतरिक्ष में डायनेमिक डेटा शामिल नहीं है, इसलिए किसी तुलना की आवश्यकता नहीं है)
   1.3। "काट्ज़" === "काट्ज़", चूंकि सहायक "शुद्ध" हैं, हम जानते हैं कि हमें to-upper-case सहायक का फिर से आह्वान नहीं करना पड़ेगा, और इसलिए हम उस सहायक ("KATZ") के उत्पादन को जानते हैं ) _also_ नहीं बदला, तो यहाँ करने के लिए कुछ भी नहीं
2. इसी तरह, पंक्ति 2 और 3 के लिए कुछ नहीं करना है
3. DOM में कोई चौथी पंक्ति नहीं है, इसलिए एक नया डालें
   3.1। <li> नोड डालें
   3.2। एक पाठ नोड डालें ("एंड्रयू")
   3.3। टेक्स्ट नोड (स्पेस) डालें
   3.4। to-upper-case सहायक ("टिम्बरलेक" -> "TIMBERLAKE") आमंत्रित करें
   3.5। एक पाठ नोड डालें ("TIMBERLAKE")

इसलिए, इस कार्यान्वयन के साथ, हमने तुलनाओं की लागत पर 23 से 5 (w हाथ लहराते हुए) की कुल संख्या को कम कर दिया, लेकिन हमारे उद्देश्य के लिए, हम यह मान रहे हैं कि वे बाकी की तुलना में अपेक्षाकृत सस्ते हैं। बुरा नहीं।

सूची में किसी आइटम को प्रस्तुत करना

लेकिन अब, अगर सूची में _appending_ { first: "Andrew", last: "Timberlake" } बजाय, हम क्या करेंगे, तो इसके बजाय हम क्या करेंगे? हम उम्मीद करेंगे कि निम्नलिखित DOM का निर्माण करने के लिए टेम्पलेट:

<ul>
  <li>Andrew TIMBERLAKE</li>
  <li>Yehuda KATZ</li>
  <li>Tom DALE</li>
  <li>Godfrey CHAN</li>
</ul>

पर कैसे_?

1. पहली पंक्ति के साथ पहली वस्तु { first: "Andrew", last: "Timberlake" } तुलना करें, <li>Yehuda KATZ</li> :
   1.1। "एंड्रयू"! == "येहुदा", टेक्स्ट नोड को अपडेट करें
   1.2। (अंतरिक्ष में डायनेमिक डेटा शामिल नहीं है, इसलिए किसी तुलना की आवश्यकता नहीं है)
   1.3। "टिम्बरलेक"! == "काट्ज़", to-upper-case सहायक को पुनर्जीवित करता है
   1.4। "KATZ" से "TIMBERLAKE" तक टेक्स्ट नोड अपडेट करें
2. दूसरी पंक्ति { first: "Yehuda", last: "Katz" } की दूसरी पंक्ति, <li>Tom DALE</li> , एक और 3 ऑपरेशन के साथ तुलना करें
3. दूसरी पंक्ति के साथ दूसरी वस्तु { first: "Tom", last: "Dale" } तुलना करें, <li>Godfrey CHAN</li> , एक और 3 ऑपरेशन
4. DOM में कोई चौथी पंक्ति नहीं है, इसलिए एक नया डालें
   3.1। <li> नोड डालें
   3.2। एक पाठ नोड डालें ("गॉडफ्रे")
   3.3। टेक्स्ट नोड (स्पेस) डालें
   3.4। to-upper-case सहायक ("चान" -> "चान") का आह्वान करें
   3.5। टेक्स्ट नोड ("CHAN") डालें

वह 14 ऑपरेशन है। आउच!

Ity @ घटना

यह अनावश्यक लग रहा था, क्योंकि वैचारिक रूप से, चाहे हम प्रीपेड हो या अपील कर रहे हों, हम अभी भी सरणी में एक ही ऑब्जेक्ट को बदल रहे हैं (सम्मिलित कर रहे हैं)। वैकल्पिक रूप से, हमें इस मामले को संभालने में सक्षम होना चाहिए और साथ ही हमने परिशिष्ट परिदृश्य में भी किया है।

यह वह जगह है जहाँ key="@identity" आता है। सरणी में तत्वों के _order_ पर निर्भर होने के बजाय, हम उनकी जावास्क्रिप्ट वस्तु पहचान ( === ) का उपयोग करते हैं:

1. एक मौजूदा पंक्ति खोजें जिसका डेटा मेल खाता हो ( === ) पहली वस्तु { first: "Andrew", last: "Timberlake" } । चूँकि कुछ भी नहीं मिला था, एक नई पंक्ति सम्मिलित करें (पूर्व-निर्धारित करें):
   1.1। <li> नोड डालें
   1.2। एक पाठ नोड डालें ("एंड्रयू")
   1.3। टेक्स्ट नोड (स्पेस) डालें
   1.4। to-upper-case सहायक ("टिम्बरलेक" -> "TIMBERLAKE" का आह्वान करें)
   1.5। एक पाठ नोड डालें ("TIMBERLAKE")
2. एक मौजूदा पंक्ति खोजें जिसका डेटा मेल खाता हो ( === ) दूसरी वस्तु { first: "Yehuda", last: "Katz" } । पाया <li>Yehuda KATZ</li> :
   2.1। "येहुदा" === "येहुदा", कुछ नहीं करना है
   2.2। (अंतरिक्ष में डायनेमिक डेटा शामिल नहीं है, इसलिए किसी तुलना की आवश्यकता नहीं है)
   2.3। "काट्ज़" === "काट्ज़", क्योंकि सहायक "शुद्ध" हैं, हम जानते हैं कि हमें to-upper-case सहायक का फिर से आह्वान नहीं करना पड़ेगा, और इसलिए हम उस सहायक ("KATZ") के उत्पादन को जानते हैं ) _also_ नहीं बदला, तो यहाँ करने के लिए कुछ भी नहीं
3. इसी तरह, टॉम और गॉडफ्रे की पंक्तियों के लिए कुछ नहीं करना है
4. बेजोड़ वस्तुओं के साथ सभी पंक्तियों को निकालें (कोई नहीं, इसलिए इस मामले में कुछ नहीं करना है)

उस के साथ, हम इष्टतम 5 ऑपरेशन पर वापस आ गए हैं।

आनुपातिक दरों से बढ़ाएँ

फिर से यह तुलना और पुस्तक-रखने की लागत पर this हाथ लहराता है। वास्तव में, वे स्वतंत्र भी नहीं हैं, और इस बहुत सरल उदाहरण में, वे इसके लायक नहीं हो सकते हैं। लेकिन कल्पना करें कि सूची बड़ी है और प्रत्येक पंक्ति एक जटिल घटक (बहुत सारे सहायकों, संगणित गुणों, उप-घटकों, आदि) के साथ आक्रमण करती है। उदाहरण के लिए लिंक्डइन समाचार-फ़ीड की कल्पना करें। यदि हम सही डेटा के साथ सही पंक्तियों से मेल नहीं खाते हैं, तो आपके घटकों के तर्क संभावित रूप से बहुत मंथन कर सकते हैं और बहुत अधिक DOM अपडेट का कारण बन सकते हैं अन्यथा आप अपेक्षा कर सकते हैं। गलत डोम तत्वों के मिलान और डोम स्थिति को खो देने के मुद्दे भी हैं, जैसे कर्सर की स्थिति और पाठ चयन स्थिति।

कुल मिलाकर, वास्तविक दुनिया के ऐप में अतिरिक्त तुलना और पुस्तक-रखने की लागत आसानी से अधिकांश समय के लायक है। के बाद से key="@identity" एंबर में डिफ़ॉल्ट है और यह लगभग सभी मामलों के लिए अच्छी तरह से काम, आप आमतौर पर करने के बारे में चिंता करने की ज़रूरत नहीं होगी key तर्क का उपयोग करते समय {{#each}} ।

टकराव 💥

लेकिन रुकिए, एक समस्या है। इस मामले का क्या?

const YEHUDA = { first: "Yehuda", last: "Katz" };
const TOM = { first: "Tom", last: "Dale" };
const GODFREY = { first: "Godfrey", last: "Chan" };

this.list = [
  YEHUDA,
  TOM,
  GODFREY,
  TOM, // duplicate
  YEHUDA, // duplicate
  YEHUDA, // duplicate
  YEHUDA // duplicate
];

यहाँ समस्या यह है कि एक ही वस्तु _could_ एक ही सूची में कई बार दिखाई देती है। यह हमारे भोले @identity एल्गोरिथ्म को तोड़ता है, विशेष रूप से वह हिस्सा जहां हमने कहा "एक मौजूदा पंक्ति ढूंढें जिसका डेटा मेल खाता है ( === ) ..." - यह केवल तभी काम करता है जब डेटा डोम के संबंध में है 1 : 1, जो इस मामले में सच नहीं है। यह व्यवहार में असंभव प्रतीत हो सकता है, लेकिन एक रूपरेखा के रूप में, हमें इसे संभालना होगा।

इससे बचने के लिए, हम इन टकरावों को संभालने के लिए एक हाइब्रिड दृष्टिकोण का उपयोग करते हैं। आंतरिक रूप से, की-टू-डोम मैपिंग कुछ इस तरह दिखती है:

"YEHUDA" => <li>Yehuda...</li>
"TOM" => <li>Tom...</li>
"GODFREY" => <li>Godfrey...</li>
"TOM-1" => <li>Tom...</li>
"YEHUDA-1" => <li>Yehuda...</li>
"YEHUDA-2" => <li>Yehuda...</li>
"YEHUDA-3" => <li>Yehuda...</li>

अधिकांश भाग के लिए, यह _is_ बहुत दुर्लभ है, और जब यह ऊपर आता है, तो यह अधिकांश समय गुड एनफ़ ™ का काम करता है। यदि, किसी कारण से, यह काम नहीं करता है, तो आप हमेशा एक मुख्य पथ (या RFC 321 में और भी उन्नत कुंजीयन तंत्र) का उपयोग कर सकते हैं।

"🐛" पर वापस

आखिरकार हम बात कर रहे हैं कि हम ट्विडल के परिदृश्य को देखने के लिए तैयार हैं।

अनिवार्य रूप से, हमने इस सूची के साथ शुरुआत की: [undefined, undefined, undefined, undefined, undefined] ।

असंबंधित नोट: Array(5) _not_ [undefined, undefined, undefined, undefined, undefined] । यह एक "छेददार सरणी" पैदा करता है, जो कि आपको सामान्य रूप से बचना चाहिए। हालांकि, यह इस बग से असंबंधित है, क्योंकि "छेद" तक पहुंचने पर आपको वास्तव में undefined वापस मिलता है। तो हमारे _very संकीर्ण_ उद्देश्य के लिए, वे समान हैं।

चूंकि हमने कुंजी निर्दिष्ट नहीं की थी, एम्बर डिफ़ॉल्ट रूप से @identity का उपयोग करता है। इसके अलावा, चूंकि वे टकराव हैं, हम कुछ इस तरह से समाप्त हुए:

"undefined" => <input ...> 0: ...,
"undefined-1" => <input ...> 1: ...,
"undefined-2" => <input ...> 2: ...,
"undefined-3" => <input ...> 3: ...,
"undefined-4" => <input ...> 4: ...

अब, मान लें कि हम पहले चेक बॉक्स पर क्लिक करते हैं:

1. यह चयनित बॉक्स के डिफ़ॉल्ट व्यवहार को ट्रिगर करता है: जाँच की गई स्थिति को सच में बदलना
2. यह क्लिक इवेंट को ट्रिगर करता है, जिसे {{action}} संशोधक द्वारा इंटरसेप्ट किया गया है और makeChange पद्धति में फिर से भेज दिया गया है
3. यह सूची को [true, undefined, undefined, undefined, undefined] ।
4. यह DOM को अपडेट करता है।

DOM को कैसे अपडेट किया जाता है?

1. एक मौजूदा पंक्ति खोजें जिसका डेटा मेल खाता हो ( === ) पहली वस्तु true । चूँकि कुछ भी नहीं मिला था, एक नई पंक्ति <input checked=true ...>0: true... डालें
2. एक मौजूदा पंक्ति खोजें जिसका डेटा मेल खाता हो ( === ) दूसरी वस्तु undefined । मिला <input ...>0: ... (पहले की पहली पंक्ति):
   2.1। {{idx}} टेक्स्ट नोड को 1 अपडेट करें
   2.2। अन्यथा, जहाँ तक एम्बर बता सकता है, इस पंक्ति में और कुछ नहीं बदला है, और कुछ नहीं करना है
3. एक मौजूदा पंक्ति खोजें जिसका डेटा मेल खाता हो ( === ) तीसरी वस्तु undefined । चूंकि यह दूसरी बार है जब हमने undefined , आंतरिक कुंजी undefined-1 , इसलिए हमने <input ...>1: ... (पहले सेकंड की पंक्ति) पाया:
   3.1। {{idx}} टेक्स्ट नोड को 2 अपडेट करें
   3.2। अन्यथा, जहाँ तक एम्बर बता सकता है, इस पंक्ति में और कुछ नहीं बदला है, और कुछ नहीं करना है
4. इसी तरह, undefined-2 और undefined-3 अपडेट करें
5. अंत में, बेजोड़ undefined-4 पंक्ति को हटा दें (क्योंकि अद्यतन के बाद सरणी में एक कम undefined )

तो यह बताता है कि हमें ट्विडल में आपके द्वारा प्राप्त आउटपुट कैसे मिला। अनिवार्य रूप से सभी DOM पंक्तियों को एक से नीचे स्थानांतरित कर दिया गया, और शीर्ष पर एक नया डाला गया, जबकि {{idx}} शेष के लिए अपडेट किया गया है।

वास्तव में अप्रत्याशित हिस्सा 2.2 है। भले ही पहले चेकबॉक्स (जिस पर क्लिक किया गया था) को एक पंक्ति से दूसरी स्थिति में स्थानांतरित कर दिया गया था, आप शायद एम्बर से इसके checked उम्मीद करेंगे true में बदल गई है, और चूँकि इसका बंधित मूल्य अपरिभाषित है, आप उम्मीद कर सकते हैं कि एम्बर इसे वापस false , इस प्रकार इसे अनचेक कर सकता है।

लेकिन यह नहीं है कि यह कैसे काम करता है। जैसा कि शुरुआत में बताया गया है, DOM तक पहुँचना महंगा है। इसमें DOM से _reading_ शामिल है। अगर, हर अपडेट पर, हमें अपनी तुलना के लिए DOM से नवीनतम मूल्य पढ़ना होगा, तो यह हमारे अनुकूलन के उद्देश्य को बहुत कम कर देगा। इसलिए, इससे बचने के लिए, हमने अंतिम मान को याद किया, जो हमने DOM को लिखा था, और कैश्ड वैल्यू के विरुद्ध वर्तमान मूल्य की तुलना करें उसे DOM से वापस पढ़े बिना। अंतर होने पर ही हम DOM को नया मूल्य लिखते हैं (और अगली बार इसे कैश करते हैं)। यह वह अर्थ है जिसमें हम समान "वर्चुअल डोम" दृष्टिकोण को साझा करते हैं, लेकिन हम इसे केवल लीफ नोड्स में करते हैं, न कि पूरे डोम के "ट्री-नेस" को वर्चुअलाइज करते हुए।

तो, टीएल; डीआर, "बंधन" checked संपत्ति (या value एक पाठ क्षेत्र की संपत्ति, आदि) वास्तव में आपकी अपेक्षा के अनुरूप काम नहीं करता है। कल्पना कीजिए कि अगर आप प्रदान की गई <div>{{this.name}}</div> और आप मैन्युअल रूप से अद्यतन textContent के div का उपयोग कर तत्व jQuery या क्रोम निरीक्षक के साथ। आपने उम्मीद नहीं की होगी कि एम्बर आपके लिए this.name का नोटिस करे और अपडेट करे। यह मूल रूप से एक ही बात है: checked संपत्ति के अद्यतन के बाद से एम्बर के बाहर हुआ (चेकबॉक्स के लिए ब्राउज़र के डिफ़ॉल्ट व्यवहार के माध्यम से), एम्बर के बारे में पता नहीं चल रहा है।

यही कारण है कि {{input}} सहायक मौजूद है। इसमें अंतर्निहित HTML तत्व पर संबंधित ईवेंट श्रोताओं को पंजीकृत करना है और उचित संपत्ति परिवर्तन में संचालन को प्रतिबिंबित करना है, इसलिए इच्छुक पार्टियों (जैसे प्रतिपादन परत) को अधिसूचित किया जा सकता है।

मुझे यकीन नहीं है कि जहां हमें छोड़ देता है। मैं समझता हूं कि यह आश्चर्यजनक क्यों है, लेकिन मैं यह कहना चाहूंगा कि यह दुर्भाग्यपूर्ण उपयोगकर्ता त्रुटियों की एक श्रृंखला है। शायद हमें इन तत्वों को इनपुट तत्वों पर बांधने के खिलाफ लाइनिंग होना चाहिए?

प्रासंगिक कोड:

https://github.com/emberjs/ember.js/blob/c24bc23e4139c90c8d8d96c4234d9c0c19e5c594/packages/@ember/ -internals / lib / utils / lib / iterable.ts # L390-L391

https://github.com/emberjs/ember.js/blob/c24bc23e4139c90c8d8d96c4234d9c0c19e5c594/packages/@ember/ -internals / lib / utils / lib / iterable.ts # L436-L4454

https://github.com/emberjs/ember.js/blob/c24bc23e4139c90c8d8d96c4234d9c0c19e5c594/packages/@ember/ -internals / lib / utils / lib / uter / iterable.ts # L451-L466

https://github.com/glimmerjs/glimmer-vm/blob/021dba0b8981488ee81c6a4495b95f372ae85743/packages/%40glimmer/runtime/lib/vm/attributes/dynamic.ts#L106 -L11212

@chancancode - अद्भुत स्पष्टीकरण के लिए धन्यवाद। क्या इसका मतलब यह है कि <input ... > उपयोग कभी नहीं किया जाना चाहिए, लेकिन केवल {{input ...}} जैसे सभी त्रुटियों को रोकने के लिए?

@ बोरिस-पेत्रोव के पास कुछ सीमित मामले हो सकते हैं, जहां यह स्वीकार्य है .. जैसे "इस क्लिप को अपने क्लिपबोर्ड पर कॉपी करना" के लिए एक पठनीय टेक्स्टफील्ड की तरह, या आप _can_ इनपुट तत्व का उपयोग करें + {{action}} DOM इवेंट और प्रॉपर्टी अपडेट्स को मैन्युअल रूप से प्रतिबिंबित करें (जो कि ट्वेल्ड ने करने की कोशिश की थी, सिवाय इसके कि यह @identity टक्कर में भी चले), लेकिन हाँ कुछ बिंदु पर आप {{input}} फिर से लागू कर रहे हैं और पहले से ही आपके लिए संभाले गए सभी किनारे-मामलों को संभालना। तो मुझे लगता है कि यह _probably_ उचित है कहने के लिए आपको केवल {{input}} उपयोग करना चाहिए, यदि सभी समय का नहीं।

हालाँकि, यह अभी भी इस मामले में "निश्चित" नहीं होगा जहां कुंजी के साथ टकराव हैं। Https://ember-twiddle.com/0f2369021128e2ae0c445155df5bb034?openFiles=templates.application.hbs%2C देखें

यही कारण है कि मैंने कहा, मुझे 100% यकीन नहीं है कि इस बारे में क्या करना है। एक तरफ मैं मानता हूं कि यह आश्चर्यजनक और अप्रत्याशित है, दूसरी तरफ, इस तरह की टक्कर वास्तविक ऐप्स में काफी दुर्लभ है और यही कारण है कि "कुंजी" तर्क अनुकूलन योग्य है (यह एक ऐसा मामला है जहां डिफ़ॉल्ट "@ घटना" कुंजी है फ़ंक्शन गुड एनफ़ ™ नहीं है, यही वजह है कि यह सुविधा मौजूद है)।

@chancancode - यह मुझे एक और मुद्दे की याद दिलाता है जो मैंने कुछ समय पहले खोला था । क्या आपको लगता है कि वहां भी कुछ ऐसा ही है? मुझे वहां जो उत्तर मिला (सरणी तत्वों को सेट करते समय set बजाय replace का उपयोग करने की आवश्यकता के बारे में) अभी भी मुझे अजीब लगता है।

@ बोरिस-पेट्रोव मुझे नहीं लगता कि यह संबंधित है

नमस्ते, हम अंगारे के साथ ड्रैग करने योग्य सूची के लिए सॉर्टेबल का उपयोग करते हैं। pls प्रत्येक समस्या को पुन: पेश करने के लिए इस डेमो की जाँच करें।

कदम:

• किसी भी एक आइटम को लास्ट तक खींचें
• 'v2' के लिए स्विच का चयन करें

आप डोम ट्री में घसीटे गए आइटम को देख सकते हैं।

लेकिन, अगर आइटम को अन्य स्थिति में खींचें (अंतिम आइटम नहीं), तो ऐसा लगता है कि अच्छी तरह से काम करता है।