.Şimdi React'i öğreniyorum ve size yardım etmek istiyorum.

1-Vite ile proje oluşturun
npm init vite@latest // React Sec
2-Bir APP bileşeni oluşturun ve 3 durum oluşturmak için useState kullanın
  const [items,setItems] = useState([{count:0,name:'ALL'},{count:0,name:'Done'},{count:0,name:"UNDone"}])
  const [currentBox,setCurrentBox] = useState(0)
  const [todos,setTodos] = useState([])
3-CheckBox bileşeni ve Todos bileşeni oluşturun
export function Checkbox(props){
  return (
    <div className="check-box">
      {props.items.map((item,index)=><Box changeCurrentBox ={props.changeCurrentBox} active={props.currentBox===index ? 'active':''} key={item.name} index={index} name={item.name} count={item.count} />)}
    </div>
  )
}
export function Box(props){
  const handleChangCurrentBox = ()=>{
    props.changeCurrentBox(props.index)
  }
  return (
    <span onClick={handleChangCurrentBox} className={`${props.active} box`}>{props.name}:{props.count}</span>
  )
}
import { Drag } from "./drag"
export function Todos(props){
  const handleDoneBtnClick = (index)=>{
    props.changeTodos(index,1)
  }
  const handleDelBtnClick = (index)=>{
    props.changeTodos(index,2)
  }
  return (
    <ul>
      <Drag render={props.todos.map((todo,index)=> (props.currentBox===todo.type||props.currentBox===0||props.currentBox===2&&todo.type!==1)&&<li className={`content ${todo.type===1? 'done':""}`} key={index}>
       <span className="doneBtn" onClick={()=>handleDoneBtnClick(index)} >{"✅"}</span>
       {todo.content}
       <span className="delBtn" onClick={()=>handleDelBtnClick(index)} >{"❌"}</span>
       </li>)} setItems={props.setTodos} items={props.todos}>
       </Drag>
    </ul>
  )
}
4-Tarayıcının yerel DragEvent olay uygulamasını kullanarak bir Sürükle bileşeni oluşturun , bkz. DragEvent - Web API Arayüz Referansı | MDN (mozilla.org) , yalnızca sürükleyip bırakmak nispeten basittir, yalnızca sürüklenen öğenin alt indisini almanız gerekir, ve ardından karşılık gelen öğeyle Swap sürükleme olayını dinleyin ve yeniden oluşturun.
5-Sürükleme animasyonu
Şu anda sürükleme fikrini hatırlatacak olursak, sürükleme işlemini canlandırmak istiyorsak, animasyon yapmak için değişimden önce sadece sürüklenen öğeye bir yer değiştirme vermek için transform özelliğini kullanmamız yeterlidir.Animasyon tamamlandıktan sonra , elementleri değiş tokuş edebiliriz.İlk başta, canlandırmak için css3 geçiş özelliğini kullanmak istedim ama fark ettiğimde, animasyon tamamlandıktan sonra exchange'in zamanlamasını kontrol etmenin zor olduğunu gördüm, bu yüzden düşündüm. Promise'ı js ile animasyon efekti yapmak için kullanıyorum, böylece animasyonun tamamlanma zamanlamasını alabilirim.Element değişiminden sonra çekirdek kod aşağıdaki gibidir
// dom elemanı mesafesi ve zamanı parametresini girin
function animate(elements,distances,duration){
    const start = performance.now()// başlangıç zamanı
    let isOk = [0,0] // Animasyonun tamamlanıp tamamlanmadığını belirlemek için bir dizi oluşturun (bu örnekte aynı anda yalnızca iki öğenin animasyonları olacaktır)
    return new Promise((res)=>{
      requestAnimationFrame(function animate(time){
        elements.forEach((element,index)=>{
          const distance = distances[index];
          const progress = (time-start)/duration*distance;
          if(Math.abs(progress)<=Math.abs(distance)){
            draw(progress,element) // Kapsüllenmiş animasyon işlevi
          }else{
            isOk[index]=1
          }
        })
        if(isOk.includes(0)){
          requestAnimationFrame(animate)
        }else {
          res()
        }
      })
    })
  }
Demo
İndir