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

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

<link>复制代码

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>复制代码

编写样式

这里直接采用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编写拖拽效果

首先获取需要用到的元素

// 获取整个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')
    }复制代码

解释方法

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

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

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

Méthode d'explication

🎜Il y en a beaucoup ici Voici les méthodes qui ont été utilisées ou sont rarement utilisées, expliquées ici🎜🎜🎜 ondragstart : lorsque l'utilisateur commence à faire glisser un élément ou une sélection de texte, l'événement dragstart sera déclenché🎜🎜ondragover code> : lorsqu'un élément ou une sélection de texte est glissé sur un cible glisser-déposer (une fois toutes les quelques centaines de millisecondes), un événement glisser-déposer est déclenché🎜🎜ondragenter : lorsque l'élément glissé ou lorsque la sélection de texte entre dans une cible glisser-déposer valide, le L'événement dragenter est déclenché 🎜🎜ondragend : L'événement dragend est déclenché à la fin de l'opération glisser-déposer (en relâchant le bouton de la souris ou en cliquant sur la touche d'échappement). 🎜🎜e.dataTransfer.effectAllowed : utilisé pour définir l'effet lors du glisser-déposer. Les paramètres courants incluent (déplacer, lier, copier) 🎜🎜getBoundingClientRect : renvoie l'élément pour. les informations de la fenêtre d'affichage 🎜🎜requestAnimationFrame : Redessiner l'animation 🎜🎜cancelAnimationFrame : Utilisé pour annuler la demande d'appel requestAnimationFrame 🎜🎜🎜Tous les codes 🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜 🎜🎜 🎜Fin🎜🎜Ce petit cas nous permet principalement de comprendre et d'utiliser l'attribut draggable et d'apprendre quelques méthodes de glissement. Ce que vous apprenez est ce que vous gagnez. Invitez tout le monde à communiquer avec moi et à apprendre ensemble🎜🎜Apprentissage recommandé : "🎜Tutoriel vidéo JavaScript. 🎜》🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!