Как передать данные из одной колонки в другую todo-list? Помогите пожалуйста

Question

Создаю список дел, который состоит из трех колонок. При введении через инпут данные добавляются в первую колонку и localStorage. При нажатии на любом из списка дел из первой колонки (кнопка In Progress) она должна переместиться на вторую колонку. И далее из второй на третью. До перемещения на вторую колонку вроде все нормально. Не получается правильно передать данные на вторую и третью колонку. Помогите пожалуйста, очень выручите. Здесь вот пошло не так

$(document).on('click', '.btn', function () {
      $('p').each(function () { 
        for (let key in itemsArray) {
          if (itemsArray[key] === $(this).html()) {
            $('<div>').appendTo($('#inProgress')).addClass('to_do').html(
              `<p>${itemsArray[key]}</p>
              <span class="remove"> x </span>
              <button type="button" id="transition_btn1" class="btn1">Done</button>
              </div>`);                
            }
          };
        });   
        $(this).parent().remove();
      });

Здесь полная версия https://jsfiddle.net/alex_54/pugsnL23/2/

Answer 1

Пример списка дел на React, без localStorage, с перемещением по колонкам:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title> todo with 2 columns </title>
<style>

div.itemGroup {
    display: inline-block;
    width: 40%;
    border: 1px solid silver;
    border-radius: 5px;
    padding: 10px;
    margin: 5px;
    vertical-align: top;
}

button {
    margin: 10px;
}

</style>
</head>
<body>
<div class="container"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script>
"use strict"

const { useEffect, useState }  = React
const e = React.createElement

const App = () => {
    const [ items, setItems ] = useState([0])
    const [ newCaption, setNewCaption ] = useState("")
    const setStatus = (cItem,status) => setItems(cItems=>cItems.map(item=>(
        cItem === item ? { ...item, status } : item
    )))
    const addItem = () => {
        setItems(cItems=>[...cItems,{ caption: newCaption, status: "CREATED", createdAt: Date.now() }])
        setNewCaption("")
    }
    return [
        e("input", { key: "caption", value: newCaption, onChange: ev => setNewCaption(ev.target.value) }),
        e("button", { key: "create", onClick: ev => addItem(), disabled: newCaption.length<=0 }, "Create Task"),
        e("div", { key: "itemsGroups" },
            e("div", { className: "itemGroup" },
                items.filter(item=>item.status==="CREATED").map(item=>
                    e("div", { key: item.createdAt }, 
                        e("button", { onClick: ev => setStatus(item,"DONE") }, "Done"), item.caption, 
                    )
                )
            ),
            e("div", { className: "itemGroup" },
                items.filter(item=>item.status==="DONE").map(item=>
                    e("div", { key: item.createdAt }, 
                        e("button", { onClick: ev => setStatus(item,"CREATED") }, "Undo"), item.caption, 
                    )
                )
            ),
        )
    ]
}

ReactDOM.render(e(App), document.querySelector('.container'))

</script>
</body>
</html>

И с localStorage:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title> todo with 2 columns </title>
<style>

div.itemGroup {
    display: inline-block;
    width: 40%;
    border: 1px solid silver;
    border-radius: 5px;
    padding: 10px;
    margin: 5px;
    vertical-align: top;
}

button {
    margin: 10px;
}

</style>
</head>
<body>
<div class="container"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script>
"use strict"

const { useEffect, useState }  = React
const e = React.createElement

const useLocalStorageList = (key) => {
    const [ state, setState ] = useState(()=>JSON.parse(localStorage.getItem(key)||"[]"))
    useEffect(()=>{
        localStorage.setItem(key, JSON.stringify(state))
    },[state])
    return [ state, setState ]
}

const App = () => {
    const [ newCaption, setNewCaption ] = useState("")
    const [ items, setItems ] = useLocalStorageList("todoListItems")
    const setStatus = (cItem,status) => setItems(cItems=>cItems.map(item=>(
        cItem === item ? { ...item, status } : item
    )))
    const addItem = () => {
        setItems(cItems=>[...cItems,{ caption: newCaption, status: "CREATED", createdAt: Date.now() }])
        setNewCaption("")
    }
    return [
        e("input", { key: "caption", value: newCaption, onChange: ev => setNewCaption(ev.target.value) }),
        e("button", { key: "create", onClick: ev => addItem(), disabled: newCaption.length<=0 }, "Create Task"),
        e("div", { key: "itemsGroups" },
            e("div", { className: "itemGroup" },
                items.filter(item=>item.status==="CREATED").map(item=>
                    e("div", { key: item.createdAt }, 
                        e("button", { onClick: ev => setStatus(item,"DONE") }, "Done"), item.caption, 
                    )
                )
            ),
            e("div", { className: "itemGroup" },
                items.filter(item=>item.status==="DONE").map(item=>
                    e("div", { key: item.createdAt }, 
                        e("button", { onClick: ev => setStatus(item,"CREATED") }, "Undo"), item.caption, 
                    )
                )
            ),
        )
    ]
}

ReactDOM.render(e(App), document.querySelector('.container'))

</script>
</body>
</html>

БЛОГ НА HUSL

Как передать данные из одной колонки в другую todo-list? Помогите пожалуйста

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