Вот сталкиваюсь с простой задачей и очередной раз понимаю, что вся суть программирования не в знании синтаксиса, методов и тп., а в умении ими пользоваться и сделать грамотно и проще.
Да и вобще, в какой свой метод не посмотрю, вижу, что тут слишком длинно, тут тупо... В чужой код посмотришь, там всё по полочкам, коротенько.
На примере метода sum, я постоянно пересчитываю всю сумму. Допустим там было бы 100 тыс. позиций... Проблема в том, что в голову лезут сразу тупые решения, потом сложно передумать.
Разбирать чужой код и пытаться понять? А где взять эту лучшую практику? Разобрать тот же swiper слайдер, не так легко, пока что.
Тут код для примераdocument.addEventListener('DOMContentLoaded', ()=>{
let menu = new Menu();
})
class Menu{
constructor(){
this.menuItem = document.querySelectorAll('.menu__item');
this.draggedItem = null;
this.orderList = document.querySelector('.order__list');
let wrap = document.querySelector('.wrap');
this.total = document.querySelector('.order__total');
this.cash = document.querySelector('.order__cash');
this.limit = 45;
this.cash.innerHTML = this.limit + ' бачей';
this.menuItem.forEach(l=>{
l.setAttribute('draggable', 'true');
});
wrap.addEventListener('dragstart', e=> this.dragStart(e));
wrap.addEventListener('dragover', e=> this.dragOver(e));
wrap.addEventListener('drop', e=> this.drop(e));
wrap.addEventListener('dragenter', e=> this.dragEnter(e));
wrap.addEventListener('dragleave', e=> this.dragLeave(e));
}
dragStart(e){
if(!e.target.classList.contains('menu__item')) return;
this.draggedItem = e.target;
e.dataTransfer.setDragImage(this.draggedItem, 0, 0);
}
dragOver(e){
if(!e.target.classList.contains('order__list')) return;
e.preventDefault();
return false;
}
drop(e){
if(!e.target.classList.contains('order__list')) return;
e.target.appendChild(this.draggedItem);
e.target.style.background = '';
e.preventDefault();
this.sum();
}
dragEnter(e){
if(!e.target.classList.contains('order__list')) return;
e.target.style.background = 'blue';
e.preventDefault();
}
dragLeave(e){
if(!e.target.classList.contains('order__list')) return;
e.target.style.background = '';
e.preventDefault();
}
sum(){
let items = this.orderList.querySelectorAll('.menu__item');
let amount = 0;
for(let i = 0; i < items.length; i++){
amount += +items[i].innerHTML;
}
this.total.innerHTML = amount + ' бачей';
this.cash.innerHTML = (this.limit - amount) + ' бачей';
}
}
