⏳۵۰٪ تخفیف فقط تا پایان جشنواره؛ بعدش همه‌چیز به قیمت قبل برمی‌گرده!
مشاهده دورههاثانیه
دقیقه
ساعت
روز
مشکل پیاده سازی DOMمجازی
درود دوستان میخواستم بدونم چرا برای نشون دادن آیتم های مورد نظرم رو صفحه اشکال دارم؟
بعد این کدهای منه:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag & Drop project</title>
</head>
<body>
<div class="list" id="list"></div>
<script src="./Dragable.js"></script>
<script src="./dd.js"></script>
</body>
</html>let data = [
{ id: 1, title: 'ایتم شماره 1', text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد' },
{ id: 2, title: 'ایتم شماره 2', text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد' },
{ id: 3, title: 'ایتم شماره 3', text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد' },
{ id: 4, title: 'ایتم شماره 4', text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد' },
{ id: 5, title: 'ایتم شماره 5', text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد' },
{ id: 6, title: 'ایتم شماره 6', text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد' },
{ id: 7, title: 'ایتم شماره 7', text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد' },
]
new draggable({
el: document.querySelector('#list'),
list: data,
template: (item) => {
return `
<div class="list-item" id="${item.id}">
<div class="list-item_head">
<span class="head-id">${item.id}</span>
</div>
<div class="list-item_content">
<span class="item-title">${item.title}</span>
<p>${item.text}</p>
</div>
</div>
`
},
update: (list) => {
console.log(list)
}
}) class Dragable {
constructor(options) {
this.SetupList(options)
}
SetupList(options) {
let { list, el: element, template } = options
if (!element) throw Error("this item doesn't exist");
if (!list) throw Error("list is required");
if (!template) throw Error("template is required");
if (typeof template !== 'function') throw Error("template must be a function")
if (!Array.isArray(list)) throw Error("list must be an array")
list.forEach(item => {
element.innerHTML += template(item)
})
}
}
این تصویر هم ارور من بود که تو تب کنسول نشون میداد،باید چیکار کنم؟
ثبت پرسش جدید
پاسخ‌ها
1درود. یه تایپو داری: اسم کلاست Dragable هست. با draggable صداش زدی.
گفتگوهای مرتبط
شاید پاسخ شما همین‌جا باشد