< 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 >
<div id="box1" ondragover="allowDrop(event)" ondrop="drop(event)"> <!-- draggable设置可拖放 ondragstart 拖动 什么 --> <img src="video/school.gif" alt="" draggable="true" id="img1" ondragstart="drag(event)"> <!-- ondragover
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1, m
大致思路: 鼠标 按下并且移动的 候,使得 鼠标 点击的div跟随 鼠标 移动, 松开 按键或者 鼠标 移开div ,div不跟随移动。而图层跟随 鼠标 移动只需要计算出 鼠标 的移动 位置 相对于 鼠标 按下 的原 位置 ,就可以得到偏移量,再用图层的原 位置 减去偏移量,就是图层的移动后 位置 。所以大致分为三个步骤。 首先, 鼠标 的按下事件 let flag = 0; //确定该图层是否 鼠标 处于按下状态 let oldMX = 0 // 鼠标 的原X 位置 let oldMY = 0 // 鼠标 的原Y...
<html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="robots" content="noindex,nofollow"> <title> 拖拽 效果</title> </head> <style type="text/ css "> body{ overflow: hidden;.
<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呀