织梦网站上传到服务器,湖北省建设厅的网站,扬中三茅镇,哈尔滨的网站建设公司哪家好1、什么是拖放#xff08;Drag 和 Drop#xff09;
拖放#xff0c;字面意思就是拖动#xff0c;放置
在编程里面也是如此,拖放是一种常见的特性#xff0c;即抓取对象以后拖到另一个位置。
在 HTML5 中#xff0c;拖放是标准的一部分#xff0c;任何元素都能够拖放。…1、什么是拖放Drag 和 Drop
拖放字面意思就是拖动放置
在编程里面也是如此,拖放是一种常见的特性即抓取对象以后拖到另一个位置。
在 HTML5 中拖放是标准的一部分任何元素都能够拖放。
2、设置元素为可拖放
为了使元素可拖动把 draggable 属性设置为 true
文本、图片和链接是默认可以拖放的它们的draggable属性自动被设置成了true。可以找个网页用一个图片试一下只能拖不能放
文本只有在被选中的情况下才能拖放。如果显示设置文本的draggable属性为true按住鼠标左键也可以直接拖放。
element draggabletrue | false | auto
true: 可以拖动false: 禁止拖动auto: 跟随浏览器定义是否可以拖动
3、拖放的过程
一切事情的过程都可以分为三种状态
开始----进行中-----结束
拖拽也是如此
事件On 型事件处理程序触发时刻dragondrag当拖拽元素或选中的文本时触发。dragendondragend当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键). (见结束拖拽)dragenterondragenter当拖拽元素或选中的文本到一个可释放目标时触发见 指定释放目标。dragleaveondragleave当拖拽元素或选中的文本离开一个可释放目标时触发。dragoverondragover当元素或选中的文本被拖到一个可释放目标上时触发每 100 毫秒触发一次。dragstartondragstart当用户开始拖拽一个元素或选中的文本时触发见开始拖拽操作。dropondrop当元素或选中的文本在可释放目标上被释放时触发见执行释放。
dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此我们必须阻止浏览器这种默认行为。e.preventDefault();
4、拖放的例子
!DOCTYPE html
html
head
meta charsetutf-8
title拖放的例子/title
style typetext/css
#div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;
}
/style
script//ondragover 事件规定在何处放置被拖动的数据。
//默认地无法将数据/元素放置到其他元素中。如果需要设置允许放置我们必须阻止对元素的默认处理方式。
//这要通过调用 ondragover 事件的 event.preventDefault() 方法
function allowDrop(ev) {ev.preventDefault();
}//ondragstart 属性调用了一个函数drag(event)它规定了被拖动的数据。
//dataTransfer.setData() 方法设置被拖数据的数据类型和值
function drag(ev) {ev.dataTransfer.setData(Text,ev.target.id);
}//当放置被拖数据时会发生 drop 事件。
//在上面的例子中ondrop 属性调用了一个函数drop(event)
//调用 preventDefault() 来避免浏览器对数据的默认处理drop 事件的默认行为是以链接形式打开
//通过 dataTransfer.getData(Text) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
//被拖数据是被拖元素的 id (drag1)
//把被拖元素追加到放置元素目标元素中
function drop(ev) {ev.preventDefault();var dataev.dataTransfer.getData(Text);ev.target.appendChild(document.getElementById(data));
}/script
/head
bodydiv iddiv1 ondropdrop(event) ondragoverallowDrop(event)img src/images/logo.png draggabletrue ondragstartdrag(event) iddrag1 width88 height31/div
div iddiv2 ondropdrop(event) ondragoverallowDrop(event)/div/body
/html
