JS Как изменить позицию задачи в Todolist?

Question

Есть TodoList, в нём есть определённая задача, её нужно поднять или опустить в списке задач, относительно других задач, нажатием на соответствующую кнопку ( вверх или вниз ). Вопрос: как?

<ul>
    <li>
        Text
        <button>Вверх</button>
        <button>Вниз</button>
    </li>
    <li>
        Text
        <button>Вверх</button>
        <button>Вниз</button>
    </li>
    <li>...</li>
</ul>

Answer 1

Если совсем по-деревенски, то вот так

const list = [
  {name: 'task 1', position: 0},
  {name: 'task 2', position: 1},
  {name: 'task 3', position: 2},
];


const render = () => {
  const parent = $('#parent');
  let result = '';
  list.forEach((el) => {
    result += `<li>${el.name}<button class="up" onClick="clickFunc(true, ${el.position})">Вверх</button><button class="down" onClick="clickFunc(false, ${el.position})">Вниз</button></li>`;
  });
  parent.html(result);
};

const clickFunc = (up, position) => {
  if (!(up && position === 0) && !(!up && position === list.length - 1)) {
      
    const positionChange = (up) ? -1 : 1;

    list[position].position += positionChange;
    list[position + positionChange].position += positionChange * -1;
    
    list.sort((a, b) => (a.position - b.position));
    render();
  }  
};

render();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="parent">
</ul>

БЛОГ НА HUSL

JS Как изменить позицию задачи в Todolist?

Ответы (1 шт):