如何将数组与foreach一起与foreach一起使用creatememo maparray显示以显示在顶部的拖动项目

Question

我正在尝试显示拖放物品在顶部的列表。 我对嵌套在createMemo maparray的列表进行了排序。 就我而言，它可以用这个示例来复制它。

＃1问题，为什么此示例不排序并在顶部显示拖动项目。 createEfect console.log m_atoms_sorted也不会retrigger，即使它触及了每个原子的.dragging信号。

＃2问题，就我而言，但是当我尝试通过setList1从原始数组中删除项目时，就会发生问题。在这种情况下，list1正确更新，但它显示为旧项目并删除错误的项目。

如果我删除了问题的消失。

import { render } from "solid-js/web";
import { For, createSignal, createMemo, mapArray, createEffect } from "solid-js";

const make_atom = (n) => {
   let [_dragging, _setDragging] = createSignal(false)

   return {
      n,
      get dragging() { return _dragging() },
      set dragging(v: boolean) { _setDragging(v) }
   }
}

function Counter() {
  const [list1, setList1] = createSignal([1, 2, 3, 4, 5]);
  
  const m_atoms = createMemo(mapArray(list1, make_atom))

  const m_atoms_sorted = createMemo(() => {
     return m_atoms()
      .sort((a, b) => a.dragging ? (b.dragging ? 0 : 1) : (b.dragging ? -1 : 0))
  })
  createEffect(() => {
     console.log(m_atoms().map(_ => _.dragging).join(''))
  })
  createEffect(() => {
  console.log(m_atoms_sorted())
  })

  return (<>
    <For each={m_atoms_sorted()}>{ item => 
       <span onClick={_ => item.dragging = !item.dragging}>|{item.n}{item.dragging ? 'drag':'nodrag'}|</span>
    }</For>
    </>)
}

render(() => <Counter />, document.getElementById("app"));

编辑

确定，如果我删除m_atoms_sorted的createMeMo，它将拖动项目正确。所以我的问题是＃2。

Answer 1

示例中的组件逻辑还不够清晰，但是maparray和indexArray在内部进行备忘录，因此您不必预先进行。

如果将它们存储在信号中并相应地更新订单，则可以更轻松地重新排序。

// Swap the elements in place and return a new array
// otherwise signal will not update.
function swapElements(arr: Array<any>, a: number, b: number) {
  let temp = arr[a];
  arr[a] = arr[b];
  arr[b] = temp;
  return [...arr];
};

const initialVal = Array.from({ length: 10 }, ((v, i) => `Item #${i}`));

const App = () => {
  const [items, setItems] = createSignal(initialVal);
  const [prevPos, setPrevPos] = createSignal(0);

  const handleStart = (event: MouseEvent) => {
    setPrevPos(event.target.dataset.order);
  };

  const handleDrop = (event: MouseEvent) => {
    event.preventDefault();
    const nextPos = event.target.dataset.order;
    const arr = swapElements(items(), nextPos, prevPos());
    setItems(arr);
  };

  const handleDragOver = (event: MouseEvent) => {
    event.preventDefault();
  };


  return (
    <ul>
      {mapArray(items, (item, index) => {
        return (
          <li
            ondragstart={handleStart}
            ondragover={handleDragOver}
            onDrop={handleDrop}
            data-order={index()}
            draggable={true}
          >
            {item}
          </li>
        );
      })}
    </ul>
  );
}