⏳ افزایش قیمت | آخرین فرصت خرید دوره‌های برنامه‌نویسی با قیمت سال قبل با => ۶۵٪ تخفیف
مشاهده دوره‌ها
ثانیه
دقیقه
ساعت
روز
محمدامیر بشردوست
11 ساعت پیش
توسط محمدامیر بشردوست
مطرح شد
مشکل پیاده سازی 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)
})
}
}
این تصویر هم ارور من بود که تو تب کنسول نشون میداد،باید چیکار کنم؟
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ثبت پرسش جدید
