Apprenez étape par étape à utiliser js pour obtenir un effet glisser-déposer

藏色散人

Libérer： 2023-01-24 08:30:01

avant

2757 Les gens l'ont consulté

Cet article vous apporte des connaissances pertinentes sur la mise en œuvre des effets glisser-déposer front-end. Il présente principalement comment utiliser js pour obtenir un bel effet glisser-déposer ? Comment taper et mettre en page ? Pour ceux que cela intéresse, jetons un coup d’œil ci-dessous, j’espère que cela sera utile à tout le monde.

Avant-propos

J'ai récemment vu une vidéo d'un effet de traînée. De nombreuses personnes ont commenté que cela ne fonctionnait pas si je continuais à appuyer dessus. De plus, l'auteur n'a pas répondu à certaines des questions soulevées par tout le monde. sur la mentalité de savoir ce qui se passe, il faut savoir pourquoi. J'ai étudié l'effet de mise en œuvre et compris son principe de mise en œuvre. Ici, je vais passer en revue le principe pour vous. Ce que vous apprenez, c'est de gagner

Préparez-vous

Ici. nous devons utiliser l'icône de police, nous l'importons donc directement depuis la bibliothèque d'icônes iconfont Alibaba

Trouvez l'icône dont vous avez besoin et ajoutez-la au projet
Trouvez le projet où se trouve l'icône, cliquez pour voir le lien
Copiez l'adresse, ou cliquez sur l'adresse pour copier le lien d'adresse après le saut

Apprenez étape par étape à utiliser js pour obtenir un effet glisser-déposer

<link>复制代码

Copier après la connexion

Créez la structure requise

Nous devons d'abord écrire la structure

déplaçable : Rendre la boîte déplaçabledraggable:让盒子可以进行拖拽
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>复制代码

Copier après la connexion

编写样式

这里直接采用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;
}复制代码

Copier après la connexion

Apprenez étape par étape à utiliser js pour obtenir un effet glisser-déposer

js编写拖拽效果

首先获取需要用到的元素

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

Copier après la connexion

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

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

Copier après la connexion

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

注意： 在码上掘金从上往下的时候会出现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')
    }复制代码

Copier après la connexion

解释方法

这里有好多没有用过或者比较少用的方法，这里给大家解释一下

ondragstart:当用户开始拖动一个元素或文本选择时，会触发dragstart事件
ondragover:当元素或文本选择被拖到有效的拖放目标上时(每几百毫秒一次)，就会触发拖放事件
ondragenter:当被拖动的元素或文本选择进入有效的拖放目标时，会触发dragenter事件
ondragend: 当拖放操作结束时(通过释放鼠标按钮或点击escape键)触发dragend事件。
e.dataTransfer.effectAllowed:用于设置拖放时的效果，常用参数有（move,link,copy）
getBoundingClientRect:返回元素对于视口的信息
requestAnimationFrame:重绘动画
cancelAnimationFrame

style="--color:#e63e31"

rrreeeÉcrivez le style

Ici, flex est utilisé directement pour mettre en page la boîtebackground-color : var(--color);var(- -color) est ou la couleur d'un attribut personnalisérrreee

Effet glisser-déposer d'écriture JS

Obtenez d'abord ce dont vous avez besoin Lorsque l'élément

rrreee

commence à glisser, vous devez ajouter un déplacer la classe et définir l'effet de mouvement

rrreee

Pendant le glissement, vous devez juger si c'est de haut en bas ou de bas en haut, en fonction de l'index de l'élément déplacé et de l'élément placé. Comparez et insérez des nœuds dans les éléments déplacés.

Remarque : Il y aura un bug lors du Nugging sur le code de haut en bas, mais pas dans le navigateur, je pense personnellement que cela devrait être un problème avec les Nuggets rrreeeAprès le glisser, supprimez le style lors du glisser

rrreee