大家好，有时候在开发前端时我们会时不时的会在浏览器网页上需要，会移动图片或者元素等等，这样我们就要使用拖放的技术Drag and Drop(DnD)， 拖放(DnD)是HTML5的第一规范定义了一种基于事件的机制、JavaScript API和其他标记，用于声明页面上几乎任何类型的元素都可以拖放。我认为没有人会反对本地浏览器对某个特性的支持。本地浏览器DnD意味着更快、响应更快的web应用程序。
拖放是一个非常常见的特性。它是指你“抓取”一个对象并将其拖到另一个位置。
为什么使用拖放技术？
例如，想象一个棋子移动动的象棋游戏或者可移动的图片，他们都需要拖放技术的支持。尽管浏览器支持已经相当完善，但是确定浏览器是否实现了DnD(或任何HTML5特性)对于提供一个可以很好地降解的解决方案是很重要的。当DnD不可用时，启动该库备份以维护一个可用的应用程序。
如何使用拖放技术？
接下来我使用两种方式进行一个是HTML和js
1.HTML拖拽的例子
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<
!
DOCTYPE
HTML
>
<
html
>
<
head
>
<style>
#div1
{
width
:
350px
;
height
:
70px
;
padding
:
10px
;
border
:
1px
solid
#aaaaaa
;
}
</style>
<script>
//定义一个拖拽的开关，是否允许拖放。
function
allowDrop
(
ev
)
{
ev
.
preventDefault
(
)
;
}
//拖拽
function
drag
(
ev
)
{
ev
.
dataTransfer
.
setData
(
"text"
,
ev
.
target
.
id
)
;
}
//放
function
drop
(
ev
)
{
ev
.
preventDefault
(
)
;
var
data
=
ev
.
dataTransfer
.
getData
(
"text"
)
;
ev
.
target
.
appendChild
(
document
.
getElementById
(
data
)
)
;
}
</script>
<
/
head
>
<
body
>
<
p
>
Drag
the
W3Schools
image
into
the
rectangle
:
<
/
p
>
<
div
id
=
"div1"
ondrop
=
"drop(event)"
ondragover
=
"allowDrop(event)"
>
<
/
div
>
<
br
>
<
img
id
=
"drag1"
src
=
"https://www.sky8g.com/skin/sky8g/sky8g.png"
draggable
=
"true"
ondragstart
=
"drag(event)"
width
=
"336"
height
=
"69"
>
<
/
body
>
<
/
html
>
|
2.使用js/jquery进行实现
A. 第一个示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<
!
DOCTYPE
html
>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>
jQuery
example
:
drag
and
drop
<
/
title
>
<style>
body
{
font-size
:
32px
;
}
#dropzone
{
top
:
150px
;
width
:
200px
;
height
:
200px
;
background
:
cyan
;
border
:
solid
1px
;
}
</style>
<
/
head
>
<
body
>
<
div
>
Drag
Winston
into
the
rectangle
<
/
div
>
<
img
id
=
"winston"
src
=
"https://www.sky8g.com/skin/sky8g/Winston.png"
>
<
div
id
=
"dropzone"
>
<
/
div
>
<script
src
=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"
>
</script>
<
!
--
Also
include
jQueryUI
--
>
<script
type
=
"text/javascript"
src
=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"
>
</script>
<script>
$
(
"#winston"
)
.
draggable
(
)
;
$
(
"#dropzone"
)
.
droppable
(
{
drop
:
function
(
event
,
ui
)
{
$
(
this
)
.
css
(
'background'
,
'rgb(0,200,0)'
)
;
}
,
over
:
function
(
event
,
ui
)
{
$
(
this
)
.
css
(
'background'
,
'orange'
)
;
}
,
out
:
function
(
event
,
ui
)
{
$
(
this
)
.
css
(
'background'
,
'cyan'
)
;
}
}
)
;
</script>
<
/
body
>
<
/
html
>
|
B. 第二个示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<
!
doctype
html
>
<
html
lang
=
"en"
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
"//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
>
<style>
#draggable
{
width
:
100px
;
height
:
100px
;
padding
:
0.5em
;
float
:
left
;
margin
:
10px
10px
10px
0
;
}
#droppable
{
width
:
150px
;
height
:
150px
;
padding
:
0.5em
;
float
:
left
;
margin
:
10px
;
}
</style>
<script
src
=
"https://code.jquery.com/jquery-1.12.4.js"
>
</script>
<script
src
=
"https://code.jquery.com/ui/1.12.1/jquery-ui.js"
>
</script>
<script>
$
(
function
(
)
{
$
(
"#draggable"
)
.
draggable
(
)
;
$
(
"#droppable"
)
.
droppable
(
{
drop
:
function
(
event
,
ui
)
{
$
(
this
)
.
addClass
(
"ui-state-highlight"
)
.
find
(
"p"
)
.
html
(
"Dropped!"
)
;
}
}
)
;
}
)
;
</script>
<
/
head
>
<
body
>
<
div
id
=
"draggable"
class
=
"ui-widget-content"
>
<
p
>
Drag
me
to
my
target
<
/
p
>
<
/
div
>
<
div
id
=
"droppable"
class
=
"ui-widget-header"
>
<
p
>
Drop
here
<
/
p
>
<
/
div
>
<
/
body
>
<
/
html
>
|
在本篇文章中，我讨论了拖放。我希望它对那些正在工作或正在考虑工作的人有用。
如果有不懂的地方请留言，SKY8G网站编辑者专注于研究IT源代码研究与开发。希望你下次光临，你的认可和留言是对我们最大的支持，谢谢！