HTML5+JS:拖动元素
HTML的元素一般都是静止状态,但交互离不开元素的可拖动性,因此,HTML5引入了 draggable 属性。draggable源于动词 drag,拖动,able 作为形容词后缀,表示可以、能够等意思,draggable就是可拖动的之意(注意g要双写)。
当web元素拥有 draggable="true" 的属性设定,理论上它是可以拖动的,不论它是一个图片,还是一个 div,甚至只是一个链接。这里,以图片为例,将 draggable 属性写入 img 标签:
<img id="img1" alt="" src="图片地址" draggable="true" />
这样,理论上,图片就是可以拖动的。但是,wed可视对象能否真正被拖动,HTML自身无法独立完成,img标签仅赋予了图片可拖动的属性,真正实现起来,需要通过设计一系列的 JS 函数来帮忙完成。
第一,我们要明确拖动什么,可用 dataTransfer.setData() 方法来设置被拖放内容的相关数据。
data是数据,transfer,转移之意,dataTransfer就是数据转移、移动、拖动;set,设置,setData,设置数据。此方法需要两个参数:格式和数据。第一个参数,即数据格式,我们可以自设为“pic”或其他的,是将来要引用数据的关键词依据,保持声明引用前后一致就行,第二个参数,即数据,就是图片呀什么的要被拖动的对象,它通过目标对象的 id 标识符来表示。
比如,假设有一个元素叫 obj,则如果要拖动这个元素,可以这么办:
dataTransfer.setData("pic",obj.target.id);
如前已解释,pic是我们定义的数据格式或类型标识,将在后续被使用,要放在引号里;第二个参数 obj.target.id 语句里,obj是我们定义的对象名,target.id 是目标id,必须这样表达,强记。
现在,我们来设计一个JS函数,完成定义要拖动什么的工作:
function drag(obj) {
obj.dataTransfer.setData("pic", obj.target.id);
}
drag(obj)是我们自定义的函数,函数名 drag,函数参数是obj,指被拖动对象。函数内容放在大括号里,表示对象obj通过 dataTransfer.setData() 方法,定义数据类型为 pic 的 obj 为即将被移动的对象(内容)。
drag(obj)这个函数发生在HTML对象开始移动之时,即 JS 对应的 ondragstart 事件,所以,img标签的HTML代码要加入它,通过 ondragstart 事件 调用 drag(obj) 函数,drag(obj)函数的参数不能随便命名,只能用“event”这个单词,亦即,告诉函数 drag(obj),我们要在图片的 ondragstart 事件中调用你,你的 obj 参数传入的是 event 元素:
<img id="img1" alt="" src="图片地址" draggable="true" ondragstart="drag(event)" />
再次强调:上句,新加入的蓝红字串里,自定义的drag()函数的obj参数只能用 event(元素)这个单词传入,后面定义的自定义函数也是这样使用。
第二,移动到何处。移民要有接收地,假如你是移民,你从A国出发,即 ondragstart 事件已经发生,下一步就是路经(over)某国,JS对应的 ondragover 事件发生,经过B国时,HTML世界里,默认是不接纳移民被放下(drop)的,我们需要取消该拒绝移民的“政策”:
preventDefault()
这是“阻止默认属性”之意,亦即取消默认设置,令其开放准许接接收“移民”。我们需要设计一个函数来发出我们的强迫B国接收移民的函数指令:
function allowDrop(obj) {
obj.preventDefault();
}
这个函数我们也设计了一个参数 obj,对象之意,obj是一个函数变量,这里它不是指图片,而是指接收图片“移民”的一个“国家”,B国,在HTML里,可以是一个 div 盒子:
(这个地方代码编辑起来很怪异,请参阅后面的相应代码)
好了,B国允许移民了,那就把移民放下,这个需要 JS 对应的 ondrop 方法,我们同样要为这个方法设计一个函数:
function drop(obj) {
obj.preventDefault();
var data = obj.dataTransfer.getData("pic");
obj.target.appendChild(document.getElementById(data));
}
drop(obj) 是我们自定义的函数,在这里,obj 参数指被放下的图片对象(即“移民”),首先申明去除图片被放下时接收地打开方式的默认设定(默认是链接处理),再通过getData方法获取被放下的目标数据类型依据,即pic(参考第一步的解释),赋值给data句柄变量,接着在目的地即“B国”用 appendChild(追加孩子)的方法将图片追加到其中。
drop(obj)函数在B国 div 中通过 ondrop 事件调用:
(这个地方代码编辑起来很怪异,请参阅后面的相应代码)
当web元素拥有 draggable="true" 的属性设定,理论上它是可以拖动的,不论它是一个图片,还是一个 div,甚至只是一个链接。这里,以图片为例,将 draggable 属性写入 img 标签:
<img id="img1" alt="" src="图片地址" draggable="true" />
这样,理论上,图片就是可以拖动的。但是,wed可视对象能否真正被拖动,HTML自身无法独立完成,img标签仅赋予了图片可拖动的属性,真正实现起来,需要通过设计一系列的 JS 函数来帮忙完成。
第一,我们要明确拖动什么,可用 dataTransfer.setData() 方法来设置被拖放内容的相关数据。
data是数据,transfer,转移之意,dataTransfer就是数据转移、移动、拖动;set,设置,setData,设置数据。此方法需要两个参数:格式和数据。第一个参数,即数据格式,我们可以自设为“pic”或其他的,是将来要引用数据的关键词依据,保持声明引用前后一致就行,第二个参数,即数据,就是图片呀什么的要被拖动的对象,它通过目标对象的 id 标识符来表示。
比如,假设有一个元素叫 obj,则如果要拖动这个元素,可以这么办:
dataTransfer.setData("pic",obj.target.id);
如前已解释,pic是我们定义的数据格式或类型标识,将在后续被使用,要放在引号里;第二个参数 obj.target.id 语句里,obj是我们定义的对象名,target.id 是目标id,必须这样表达,强记。
现在,我们来设计一个JS函数,完成定义要拖动什么的工作:
function drag(obj) {
obj.dataTransfer.setData("pic", obj.target.id);
}
drag(obj)是我们自定义的函数,函数名 drag,函数参数是obj,指被拖动对象。函数内容放在大括号里,表示对象obj通过 dataTransfer.setData() 方法,定义数据类型为 pic 的 obj 为即将被移动的对象(内容)。
drag(obj)这个函数发生在HTML对象开始移动之时,即 JS 对应的 ondragstart 事件,所以,img标签的HTML代码要加入它,通过 ondragstart 事件 调用 drag(obj) 函数,drag(obj)函数的参数不能随便命名,只能用“event”这个单词,亦即,告诉函数 drag(obj),我们要在图片的 ondragstart 事件中调用你,你的 obj 参数传入的是 event 元素:
<img id="img1" alt="" src="图片地址" draggable="true" ondragstart="drag(event)" />
再次强调:上句,新加入的蓝红字串里,自定义的drag()函数的obj参数只能用 event(元素)这个单词传入,后面定义的自定义函数也是这样使用。
第二,移动到何处。移民要有接收地,假如你是移民,你从A国出发,即 ondragstart 事件已经发生,下一步就是路经(over)某国,JS对应的 ondragover 事件发生,经过B国时,HTML世界里,默认是不接纳移民被放下(drop)的,我们需要取消该拒绝移民的“政策”:
preventDefault()
这是“阻止默认属性”之意,亦即取消默认设置,令其开放准许接接收“移民”。我们需要设计一个函数来发出我们的强迫B国接收移民的函数指令:
function allowDrop(obj) {
obj.preventDefault();
}
这个函数我们也设计了一个参数 obj,对象之意,obj是一个函数变量,这里它不是指图片,而是指接收图片“移民”的一个“国家”,B国,在HTML里,可以是一个 div 盒子:
(这个地方代码编辑起来很怪异,请参阅后面的相应代码)
好了,B国允许移民了,那就把移民放下,这个需要 JS 对应的 ondrop 方法,我们同样要为这个方法设计一个函数:
function drop(obj) {
obj.preventDefault();
var data = obj.dataTransfer.getData("pic");
obj.target.appendChild(document.getElementById(data));
}
drop(obj) 是我们自定义的函数,在这里,obj 参数指被放下的图片对象(即“移民”),首先申明去除图片被放下时接收地打开方式的默认设定(默认是链接处理),再通过getData方法获取被放下的目标数据类型依据,即pic(参考第一步的解释),赋值给data句柄变量,接着在目的地即“B国”用 appendChild(追加孩子)的方法将图片追加到其中。
drop(obj)函数在B国 div 中通过 ondrop 事件调用:
(这个地方代码编辑起来很怪异,请参阅后面的相应代码)
完整的HTML和JS代码如下(设定了图片尺寸与div边框以方便观察效果):
- < *img id="img1" alt="" src="./pic/2.jpg" draggable="true" ondragstart="drag(event)" width="200" />
- <* div id="B国" ondragover="allowDrop(event)" ondrop="drop(event)" style="border:1px solid; width:400px;height:400px;"></div>
- < * script language="javascript">
- function drag(obj) {
- obj.dataTransfer.setData("pic", obj.target.id);
- }
- function allowDrop(obj) {
- obj.preventDefault();
- }
- function drop(obj) {
- obj.preventDefault();
- var data = obj.dataTransfer.getData("pic");
- obj.target.appendChild(document.getElementById(data));
- }
- </*script>
前一篇: JS教程之六——for语句
下一篇: svg带lrc圆环播放器封装成了JS文件
发表评论:
评论列表 [0条]