<
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
>
<
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: