드래그 앤 드롭 효과를 얻기 위해 js를 사용하는 방법을 단계별로 가르쳐주세요.

藏色散人

풀어 주다： 2023-01-24 08:30:01

앞으로

2757명이 탐색했습니다.

이 기사에서는 프론트 엔드 드래그 앤 드롭 효과 구현에 대한 관련 지식을 제공하며, 멋진 드래그 앤 드롭 효과를 얻기 위해 JS를 사용하는 방법을 주로 소개합니다. 입력 및 레이아웃 방법은 무엇입니까? 관심 있으신 분들은 아래 내용을 살펴보시고 모두에게 도움이 되었으면 좋겠습니다.

머리말

최근에 드래그 효과에 대한 영상을 봤는데 많은 분들이 드래그 효과를 따라하면 효과가 없다는 댓글을 많이 주셨는데요. 무슨 일이 일어나고 있는지 아는 사고 방식은 구현 효과를 연구하고 구현 원리를 이해하는 데 필요합니다. 여기에서는 수익을 창출하는 원리를 검토하겠습니다.

준비

여기서 글꼴 아이콘을 사용하므로 iconfont Alibaba 아이콘 라이브러리에서 직접 가져옵니다

필요한 아이콘을 찾아 프로젝트에 추가하세요
아이콘이 있는 프로젝트를 찾아 링크를 보려면 클릭하세요
주소 복사 , 또는 점프 후 주소를 클릭하여 주소 링크를 복사하세요

드래그 앤 드롭 효과를 얻기 위해 js를 사용하는 방법을 단계별로 가르쳐주세요.

<link>复制代码

로그인 후 복사

필요한 구조를 생성하세요

구조를 먼저 작성해야 합니다

드래그 가능: 상자를 드래그 가능하게 만드세요draggable:让盒子可以进行拖拽
style="--color:#e63e31"--color让盒子背景色根据--color显示（与下方css样式相联系）

 <div>        <div>
            <i></i>
            <span>双鱼座</span>
        </div>
        <div>
            <i></i>
            <span>水平座</span>
        </div>
        <div>
            <i></i>
            <span>摩羯座</span>
        </div>
        <div>
            <i></i>
            <span>处女座</span>
        </div>
        <div>
            <i></i>
            <span>狮子座</span>
        </div>
    </div>复制代码

로그인 후 복사

编写样式

这里直接采用flex对盒子进行排版布局

background-color: var(--color);var(--color)是或者自定义属性的颜色

body{
  background-color: #000;
}
.list{  width: 300px;  height: 360px;  /* padding: 20px 0; */
  margin: 100px auto 0;  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.list-item{  width: 100%;  display: flex;
  align-items: center;  padding: 0 16px;
  border-radius: 10px;  /* margin-bottom: 20px; */background-color: var(--color);
}
.constellation{
  line-height: 2.5em;
  font-size: 20px;  color: #fff;
}
.list-item-img{  width: 30px;  height: 30px;
}
.list-item-title{
  margin-left: 20px;  color: #fff;
}// 移动动画class.list-item.moving{
background-color: transparent;border: 2px dashed #ccc;
}复制代码

로그인 후 복사

드래그 앤 드롭 효과를 얻기 위해 js를 사용하는 방법을 단계별로 가르쳐주세요.

js编写拖拽效果

首先获取需要用到的元素

// 获取整个listconst list = document.querySelector('.list')// 获取每一个盒子const item = document.querySelectorAll('.list-item')复制代码

로그인 후 복사

开始拖动的时候需要加上移动的类，并且设置移动效果

// 开始拖动
    list.ondragstart = e => {
        source_node = e.target
        recode(item)        setTimeout(() => {        // 拖拽时样式
            e.target.classList.add('moving')
        }, 0)        // 设置拖动效果
        e.dataTransfer.effectAllowed = 'move'
    }复制代码

로그인 후 복사

拖拽中需要判断是从上往下还是从下往上，根据拖拽元素和放入元素的索引进行比对，从而对拖拽元素进行插入节点操作

注意： 在码上掘金从上往下的时候会出现bug，在浏览器不会，我个人觉得应该是是码上掘金的问题

 // 拖拽放入有效目标触发
    list.ondragenter = e => {
        e.preventDefault()        console.log(e.target.id, list)        if (e.target === list || e.target === source_node) {            return false
        }        const childer = Array.from(list.children)        const sourceIndex = childer.indexOf(source_node)        const targetIndex = childer.indexOf(e.target)        // console.log(sourceIndex, targetIndex)
        if (sourceIndex <p>拖拽结束后把拖拽时的样式移除</p><pre class="brush:php;toolbar:false">// 拖放结束
    list.ondragend = e => {
        e.target.classList.remove('moving')
    }复制代码

로그인 후 복사