ContentEditable
当鼠标点击div
,它就变成了一个input
框, 可以进行输入。没有兼容性问题。一般用来做可以修改的表格。
这个属性是可以继承的, 在这个div
里面的所有子标签里面的文本都可以编辑。除非给子标签设置此属性为false
。但是可以将整个标签的内容,连带标签看作一个整体删除.
dragable
旁边的比左边的颜色要淡,就是拖拽出来的一个虚影。chrome
, safari
支持,firefox
只有少数几个版本支持
a
, img
标签的默认dragable
是打开的拖拽的生命周期:开始拖拽,拖拽进行中, 拖拽结束
被拖拽物体, 目标区域
var demo = document.getElementById('demo')
demo.ondragstart = function(e){
console.log(e)
}
demo.ondragend = function(e){
console.log(e)
}
两次e
中的clientX
,clientY
分别代表的起始位置和最终位置
将一个方块拖到指定位置
var demo = document.getElementById('demo')
var beginX = 0
var beginY = 0
demo.ondragstart = function(e){
beginX = e.clientX
beginY = e.clientY
}
demo.ondragend = function(e){
var x = e.clientX - beginX
var y = e.clientY - beginY
demo.style.left = demo.offsetLeft + x + 'px'
demo.style.top = demo.offsetTop + y + 'px'
}
针对被拖拽元素
ondragstart
: 鼠标按下开始移动后触发
ondrag
: 拖动过程中触发
ondragend
: 拖动之后鼠标松开触发
针对目标元素
ondragenter
: 当鼠标进入指定区域的时候才会触发
ondragover
:被拖拽元素在指定区域晃动拖动的元素时触发
ondragleave
: 当被拖拽元素离开的时候触发
ondrop
: 当拖拽放下时...也不会触发。事件是由行为触发的,一个行为可能会触发多个事件。
A => B => C
, A
触发之后触发B
,B
触发之后触发C
,要想阻止C
事件,必须在B
后边。
要触发此事件, 需要在over
事件里面阻止默认事件,因为拖拽周期结束的默认事件是回到原处。over
的时候,基本上被拖拽元素已经到位了,即将松开鼠标, 这时候阻止默认事件(e.preventDefault())
是有效的。阻止了默认事件之后, 先触发此事件, 然后触发被拖拽元素的end
事件。
拖拽小demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: auto;
margin: 100px 0 0 100px;
border: 1px solid #ccc;
min-height: 30px;
}
li {
width: 150px;
height: 30px;
margin: 10px auto;
background: #abcdef;
list-style: none;
}
.box2{
position: absolute;
top: 100px;
left: 500px;
width: 200px;
min-height: 30px;
height: auto;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="box2">
</div>
<script>
var liList = document.getElementsByTagName('li')
var dragDom = null
for(var i = 0; i < liList.length; i ++){
liList[i].setAttribute('draggable', true)
liList[i].ondragstart = function(e){
dragDom = e.target
}
}
var target = document.getElementsByClassName('box2')[0]
target.ondragover = function(e){
e.preventDefault()
}
target.ondrop = function(e){
console.log(e)
target.appendChild(dragDom)
dragDom = null;
}
</script>
</body>
</html>
dataTransfer
兼容性很不好的一个属性
ele.ondragstart = function(e){
e.dataTransfer.effectAllowed = "link"
}
ele.ondrop = function(e){
e.dataTransfer.dropEffect = "link"
}
一个只能在ondragstar
t中设置, 另一个只能在ondrop
中设置。改变对应时候鼠标的指针样式。还分操作系统, 因为鼠标的样式是操作系统决定的。link, copy, move, copymove, linkmove, all
可以选择。但是一般不会用。
网友评论