Dieser Artikel vermittelt Ihnen relevantes Wissen über die Implementierung von Front-End-Drag-and-Drop-Effekten. Er stellt hauptsächlich vor, wie Sie mit js einen gut aussehenden Drag-and-Drop-Effekt erzielen. Wie tippe ich und wie gestalte ich das Layout? Für diejenigen, die interessiert sind, werfen wir einen Blick unten. Ich hoffe, es wird für alle hilfreich sein.

Vorwort

Ich habe kürzlich ein Video über einen Drag-Effekt gesehen, dass es nicht funktioniert, wenn ich dem Drag-Effekt folge. Außerdem hat der Autor nicht auf einige der von allen gestellten Fragen geantwortet Mentalität, zu wissen, was passiert, ist es notwendig zu wissen, warum. Ich habe den Implementierungseffekt untersucht und das Implementierungsprinzip verstanden Verwenden Sie Schriftsymbole, daher importieren wir sie direkt aus der Symbolbibliothek von iconfont Alibaba.

• Kopieren Sie die Adresse , oder klicken Sie auf die Adresse, um den Adresslink nach dem Sprung zu kopieren.

<link>复制代码

Wir müssen zuerst die Struktur schreiben

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

Schreiben Sie den Stil

• draggable:让盒子可以进行拖拽
• style="--color:#e63e31"--color让盒子背景色根据--color显示（与下方css样式相联系）

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

编写样式

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

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

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

js编写拖拽效果

首先获取需要用到的元素

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

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

 // 拖拽放入有效目标触发
    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><p><strong>注意：</strong> 在<strong>码上掘金</strong>从上往下的时候会出现bug，在浏览器不会，我个人觉得应该是是码上掘金的问题</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:重绘动画
• cancelAnimationFramebackground-color : var(--color);var(--color) ist oder der Farbe eines benutzerdefinierten Attributs. lazy"/>

JS schreibt Drag-and-Drop-Effekt

Besorgen Sie sich zuerst, was Sie brauchen. Wenn das Element

mit dem Ziehen beginnt, müssen Sie die Bewegungsklasse hinzufügen und die Bewegung festlegen Wirkung rrreeeHinweis : Es wird einen Fehler geben, wenn der Code von oben nach unten nugged wird, aber nicht im Browser. Ich persönlich denke, es sollte ein Problem mit dem Nuggets-Code sein rrreeeNach dem Ziehen, Entfernen Sie den Stil beim Ziehen : Wenn der Benutzer mit dem Ziehen eines Elements oder einer Textauswahl beginnt, wird das Dragstart-Ereignis ausgelöstondragover code>: Wenn ein Element oder eine Textauswahl auf ein gültiges Drag-and-Drop-Ziel gezogen wird (einmal alle paar hundert Millisekunden) wird ein Drag-and-Drop-Ereignis ausgelöst

getBoundingClientRect: Gibt das Element für zurück die Viewport-Informationen