谈谈对JavaScript原生拖放的深入理解资源-CSDN文库

183 浏览量 2021-01-19 15:23:33 上传评论收藏 84KB PDF 举报

资源推荐

资源详情

资源评论

谈谈对谈谈对JavaScript原生拖放的深入理解原生拖放的深入理解

前面的话前面的话

　　拖放(drag-and-drop,DnD)其实是两个动作——拖和放。所以，它涉及到两个元素。一个是被拖的元素，称为拖放源；另

一个是要放的目标，称为拖放目标。本文将通过拆分这两个概念来详细介绍原生拖放

拖放源拖放源

　　什么样的元素才是拖放源呢？

　　HTML5为所有HTML元素规定了一个draggable属性，表示元素是否可以拖动

　　图像和链接的draggable属性自动被设置成了true，而其他元素这个属性的默认值都是false

　　[注意]必须设置draggable=’true’才能生效，只设置draggable不起作用

　　默认情况下，文本只有在被选中的情况下才能拖动，而图像和链接在任何时候都可以拖动。而其他元素则无法被拖放

<input value="文字可拖动">

<img alt="图像可拖动" src="http://huoche.7234.cn/images/jb51/mnxfqx2atua.gif">

<a href="#">链接可拖动</a>

<div id="test" style="height:30px;width:300px;background:pink;">元素不可拖动</div>

　　当为元素设置draggable属性后，普通元素也可以拖动

<div draggable="true" style="height:30px;width:100px;background:pink;"></div>

兼容兼容

　　IE9-浏览器不支持draggable属性，但可通过mousedown事件处理程序调用dragDrop()方法来实现拖动效果

<div id="test" style="height:30px;width:300px;background:pink;"></div>

<script>

test.onmousedown = function(){

this.dragDrop();

}

</script>

　　[注意]如果让firefox支持draggable属性，必须添加一个ondragstart事件处理程序，并在dataTransfer对象使用setData()方

法来启动效果

拖放事件拖放事件

　　拖放源涉及到3个拖放事件。拖动拖放源时，依次触发dragstart、drag和dragend这3个事件

dragstart

　　按下鼠标键并开始移动鼠标时，会在被拖放的元素上触发dragstart事件。此时光标变成“不能放”符号(圆环中有一条反斜

线)，表示不能把元素放到自己上面

drag

　　触发dragstart事件后，随即会触发drag事件，而且在元素被拖动期间会持续触发该事件

dragend

　　当拖动停止时(无论是把元素放到了有效的放置目标，还是放到了无效的放置目标上)，会触发dragend事件

<div id="test" draggable="true" style="height:30px;width:100px;background:pink;">0</div>

<script>

var timer,i=0;

test.ondragstart = function(){

this.style.backgroundColor = 'lightgreen';

}

test.ondrag = function(){

if(timer) return;

timer = setInterval(function(){

test.innerHTML = i++;

},100)

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余5页未读，立即下载

内容反馈

weixin_38569675

粉丝: 4
资源: 980

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip