< div class = "container" > < div id = "box1" class = "box" draggable = "true" ondrop = "drop(event,this)" ondragover = " dragOver(event)" ondragstart = " dragStart(event, this)" > 盒子 1 < / div > < div id = "box2" class = "box" draggable = "true" ondrop = "drop(event,this)" ondragover = " dragOver(event)" ondragstart = " dragStart(event, this)" > 盒子 2 < / div > < div id = "box3" class = "box" draggable = "true" ondrop = "drop(event,this)" ondragover = " dragOver(event)" ondragstart = " dragStart(event, this)" > 盒子 3 < / div > < div id = "box4" class = "box" draggable = "true" ondrop = "drop(event,this)" ondragover = " dragOver(event)" ondragstart = " dragStart(event, this)" > 盒子 4 < / div > < div id = "box5" class = "box" draggable = "true" ondrop = "drop(event,this)" ondragover = " dragOver(event)" ondragstart = " dragStart(event, this)" > 盒子 5 < / div > < div id = "box6" class = "box" draggable = "true" ondrop = "drop(event,this)" ondragover = " dragOver(event)" ondragstart = " dragStart(event, this)" > 盒子 6 < / div > < / div > < / body > // js逻辑 < script type = "text/javascript" > function dragOver ( ev ) { ev . preventDefault ( ) ; var srcdiv = null ; function dragStart ( ev , divdom ) { srcdiv = divdom ; ev . dataTransfer . setData ( "text/html" , divdom . innerHTML ) ; function drop ( ev , divdom ) { ev . preventDefault ( ) ; if ( srcdiv != divdom ) { srcdiv . innerHTML = divdom . innerHTML ; divdom . innerHTML = ev . dataTransfer . getData ( "text/html" ) ; < / script > < style > . container { display : flex ; justify - content : center ; align - items : center ; flex - wrap : wrap ; height : 100vh ; width : 100vw ; . container div { width : 30 % ; height : 30 % ; margin : 1 % ; background - color : #ccc ; display : flex ; justify - content : center ; align - items : center ; font - size : 24px ; cursor : grab ; . container div : active { cursor : grabbing ; < / style > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1, m <script> const draggable = document.querySelector('.draggable'); const follower = document.querySelector('.follower'); let isDragging = false; draggable.addEventListener('mousedown', e => { isDragging = true; document.addEventListener('mousemove', e => { if (isDragging) { follower.style.left = e.pageX + 'px'; follower.style.top = e.pageY + 'px'; document.addEventListener('mouseup', e => { isDragging = false; </script> 在上面的代码中，我们监听了 鼠标 的mousedown、mousemove和mouseup事件。当用户按下 鼠标 时 ，我们设置 一个 标志位isDragging为true，表示用户正在 拖动 元素。在mousemove事件中，如果isDragging为true，我们就更新follower元素的 位置 为 鼠标 当前的 位置 。最后，在mouseup事件中，我们将isDragging标志位重置为false，表示用户已经停止 拖动 。 注意，这只是 一个 简单的示例代码，实际情况下你可能需要根据具体需求做一些调整。 Dream104: state 接收的是一个 reative 函数返回的响应式数据对象，里面的ruleFrom是自己定义的一个变量，用于将数据传给表单，从而将数据熏染到页面上。 <el-form :model="ruleForm" const state = reactive({ ruleForm:{} as { [key: string]: any }, 使用 Element Plus 日期组件，要求选择的日期在另一个日期前（后）或在两个日期之间 L.dade: 能联系到你嘛，这个dateid这个函数，判断state，没有看见你定义state呀