拖放的概念"/>
拖放的概念
拖放的概念
拖放的概念:拖放(Drag 和 drop)是 HTML5 标准的组成部分,是页面中的元素从初始位置被拖动到新的位置的用户行为,如拖拽页面中的指定元素到另一个元素中。
拖放过程:首先使用鼠标指针进入源对象,然后按住鼠标左键拖动源对象,当移动鼠标时源对象会跟随鼠标指针移动,如果源对象进入了目标对象,就松开鼠标左键让源对象放置在目标对象中。
源对象:表示被拖动的元素。为元素添加 draggable 属性可以设置此元素为源对象。
目标对象:源对象进入的元素称作目标对象,目标对象可以是页面中的任一元素。
拖拽事件
HTML 的 drag & drop 使用了 DOM event model
以及从 mouse events
继承而来的 drag events
。
一个典型的拖拽操作是这样的:用户选中一个可拖拽的(draggable)元素,并将其拖拽(鼠标不放开)到一个可放置的(droppable)元素,然后释放鼠标。在操作期间,会触发一些事件类型,有一些事件类型可能会被多次触发(比如 drag
和 dragover
事件类型)。
设置元素为可拖放
首先,为了使元素可拖动,把 draggable 属性设置为 true :
<img draggable="true" />
拖动什么 - ondragstart 和 setData()
在上面示例中,ondragstart 属性调用了一个函数 drag(ev)
,它规定了被拖动的数据。
DataTransfer 对象专门用来存储拖放时要携带的数据,它可以被设置为拖放事件对象的 dataTransfer 属性。
dataTransfer.setData()
方法设置被拖数据的数据类型和值:
function drag(ev) {
ev.dataTransfer.setData("text/plain", ev.target.id);
}
text/plain
是一个 DOMString,表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id:logo
。
拖放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault()
方法:
function allowDrop(ev) {
ev.preventDefault();
}
进行放置 - ondrop
当放置被拖数据时,会发生 drop 事件。
在上面的例子中,ondrop 属性调用了一个函数 drop(event)
:
function drop(ev) {
ev.preventDefault();
var id = ev.dataTransfer.getData("text/plain");
ev.target.appendChild(document.getElementById(id));
}
更多推荐
拖放的概念
发布评论