html-js: גרור ושחרר על אותו אלמנט בלבד
-
יש לי אלמנט div עם תת אלמנט שגם הוא div. יש אפשרות על שניהם של גרור ושחרר.
דא עקא שלפעמים משום מה כשאני מנסה לגרור את התת אלמנט, אלמנט האב נגרר ביחד איתו.כאן יש ניסיון להדגים. משום מה הגרירה לא עובדת שם בכלל. אבל אפשר לראות שם את הקוד.
https://codepen.io/haekrvae-the-animator/pen/NWJqvMJ
תודה רבה -
אם תספק דוגמה שאפשר לגרור בה ויש בה את הבעיה, אפשר יהיה לבדוק אם פיתרון מסוים עובד לפני שמציעים לך.
אבל דבר ראשון שהייתי מנסה זה להוסיף מטפל לאוונט בתת אלמנט לdragstart ולקרוא שם לstopPropagation$('div.deck').on('dragstart', e => e.stopPropagation());
(הסיכוי שזה יעבוד נמוך, אבל זה קשה לדבג בלי לראות את הבעיה)
-
@חגי אני העתקתי לדוגמא לעיל את כל הקוד שרלוונטי. לא הצלחתי להבין למה זה לא עבד.
מה ששלחת לא עבד.עריכה:
לכאורה זה קורה רק מתי שאני מוסיף את התת אלמנט לאלמננט אחרי טעינת הדף באמצעות הקוד להלן:row = document.getElementById({arg}); parent = row.parentElement; parent.insertAdjacentHTML('beforeend', `{sub_decks_html[int(arg)]}`); round_bars(); window.getComputedStyle(parent.children[parent.childElementCount-1]).transform setTimeout(() => {{ parent.children[parent.childElementCount-1].style.transform = "scaleY(1)"; }}, "1");
מסיבה כלשהיא הוא מחשיב הכל לדבר אחד.
אם אתה מסכים להתקין את אנקי כדי לבדוק את זה אוכל לספק את הדוגמא המדויקת. -
כך זה נראה:
פעולת ההרחבה והצמצום של כל שורה מפעילות קוד JS שמסיר/מוסיף את התתי שורות. הקוד הזה נמצא בהודעה הקודמת שלי.
@חגי עכשיו זה ניתן לגרירה. שכחתי את הקריאה לפונקציה drag_drop ()
כפי שניתן לראות חפיסה ב גוררת איתה את חפיסה א.
-
פתרתי בעזרתו של GPT.
ביטלתי את המאזין ויצרתי אותו שוב.// Disable drag and drop on div.deck $("div.deck").draggable("destroy"); $("div.deck").droppable("destroy"); // Disable drag and drop on div.top-level-drag-row $("div.top-level-drag-row").droppable("destroy"); drag_drop ();
תודה לכל מי שניסה לעזור אפי' שלא הייתי מספיק ברור.