马黑黑 发表于 2022-2-10 12:47

JS：音乐锚的拖动与播放演示

<style type="text/css">

#auplayer { width:300px; }
#ypurl { padding: 10px;}
#ypurl a { text-decoration:none;cursor:pointer; }

</style>

<audio id="auplayer" controls="controls" ondragover="allowDrop(event)" ondrop="drop(event)"></audio>
<div id="ypurl"></div>

<script type="text/javascript">

var arMu = [
["https://www.80wp.com/wj/3010593/a6946233afcfb21487e1a62e90ea8fec.mp3","听闻远方有你"],
["http://www.kumeiwp.com/sub/filestores/2021/03/01/a7f6cef7d30eff58dd2d1969b525364a.mp3","四季予你"],
["http://www.kumeiwp.com/sub/filestores/2022/02/10/d4ad1996597f3557dae4be6dd1d2ffd1.mp3","Epica"],
["http://www.kumeiwp.com/sub/filestores/2021/09/20/24100ae0522d3546612116e04ae8da00.mp3","一百万个可能"]
];
var ypurl = document.getElementById("ypurl");
var str = "";

for(i=0; i<arMu.length; i++){
        str += "<a id='yp" + i +"' href='" + arMu + "' ondragstart='drag(event)' >" + arMu + "</a><br />";
}
ypurl.innerHTML = str;

function allowDrop(obj) { obj.preventDefault(); }

function drag(obj) { obj.dataTransfer.setData("text/plain",obj.target.id); }

function drop(obj) {
        var aud = document.getElementById("auplayer");
        var evid = obj.dataTransfer.getData("text/plain",obj.target.id);
        aud.src=document.getElementById(evid);
        aud.play();
}
</script>

马黑黑 发表于 2022-2-10 12:49

一楼，把任意一首音乐拖拽到 audio 播放界面，audio就会播放该音乐。

代码还没有细细推敲，只是粗略实现了功能。分享如下：

<style type="text/css">

#auplayer { width:300px; }
#ypurl { padding: 10px;}
#ypurl a { text-decoration:none;cursor:pointer; }

</style>

<audio id="auplayer" controls="controls" ondragover="allowDrop(event)" ondrop="drop(event)"></audio>
<div id="ypurl"></div>

<script type="text/javascript">

var arMu = [
["https://www.80wp.com/wj/3010593/a6946233afcfb21487e1a62e90ea8fec.mp3","听闻远方有你"],
["http://www.kumeiwp.com/sub/filestores/2021/03/01/a7f6cef7d30eff58dd2d1969b525364a.mp3","四季予你"],
["http://www.kumeiwp.com/sub/filestores/2022/02/10/d4ad1996597f3557dae4be6dd1d2ffd1.mp3","Epica"],
["http://www.kumeiwp.com/sub/filestores/2021/09/20/24100ae0522d3546612116e04ae8da00.mp3","一百万个可能"]
];
var ypurl = document.getElementById("ypurl");
var str = "";

for(i=0; i<arMu.length; i++){
        str += "<a id='yp" + i +"' href='" + arMu + "' ondragstart='drag(event)' >" + arMu + "</a><br />";
}
ypurl.innerHTML = str;

function allowDrop(obj) { obj.preventDefault(); }

function drag(obj) { obj.dataTransfer.setData("text/plain",obj.target.id); }

function drop(obj) {
        var aud = document.getElementById("auplayer");
        var evid = obj.dataTransfer.getData("text/plain",obj.target.id);
        aud.src=document.getElementById(evid);
        aud.play();
}
</script>

马黑黑 发表于 2022-2-10 12:53

实现原理：

首先，链接默认支持拖动，<a>...>/a>标签无需设置 draggable 属性。

其次，audio标签要通过两个自定义JS函数达成两个功能，一是能够接受拖拽过来的数据，二是能够识别放下来的数据。这里面用到 dataTransfer 方法，具体吃完午饭再补充说明。

马黑黑 发表于 2022-2-10 14:35

本帖最后由 马黑黑 于 2022-2-10 14:40 编辑

关于 dataTransfer 方法

dataTransfer方法可以用来处理被拖动对象的数据：

dataTransfer.setData - 设置传送的数据
dataTransfer.getData - 设置接收的数据

传送与接收都需要两个参数：

dataTransfer.setData(参数1, 参数2)
dataTransfer.getData(参数1, 参数2)

参数1 主要是彼此间传输的标识，理论上可以随意命名，示例中我们使用了标准的表达法；参数2是元素标识，比如元素的 id ，实例中使用的是js内置的元素id关键字 xx.target.id：

xx.dataTransfer.s/getData("text/plain",obj.target.id)

再次解释：上面代码，红色部分可随意命名，保持前后一致即可（就是setData和getData的参数1要相同）；蓝色部分，只能这样，不能改动，它取对象元素的id而不论这个元素的id是什么只要有就行。

显然，dataTransfer方法是一楼示例所能达成拖拽播放的关键：数据的传输（setData）与数据的接收（getData），这是核心。要完成这些，核心支持了，还需一些细节支持：

① audio 标签通过 ondragover 的JS事件准许被拖放元素经过时显示为可以放下（仔细观察拖动动作的图标就能觉察细小的变化和函数的作用），所以HTML标签语句里有 这一句，allowDrop() 是我们的自定义函数，它在调用时参数只能用 event ；

② audio 标签通过 ondrop 的JS事件处理元素被放下后的一系列动作，由函数 ondrop()完成，语句放在audio标签里，ondrop="drop(event)"，drop()是我们的自定义函数，它在调用时候参数只能用 event ；

③HTML的锚，即<a ...> ... </a>的标签，必须有 id 标识符，例如，<a id="abc" href="...">...</a>，id 名称可随意，只要不与其他任意一个id雷同；

④ HTML锚标签里，必须调用调用了 dataTransfer.setData 的自定义函数 drag(obj) ，例如：<a id="abc" ondragstart='drag(event)' href="..." >...</a>，只有类似于这样的锚拖到 audio 时才会被正确识别为URI地址。

红影 发表于 2022-2-10 15:11

音乐也可以拖动的，非常清楚的讲解，谢谢黑黑{:4_187:}

红影 发表于 2022-2-10 15:13

嗯嗯，移动和调用必须名称对应，学习了{:4_187:}

马黑黑 发表于 2022-2-10 16:57

红影 发表于 2022-2-10 15:13
嗯嗯，移动和调用必须名称对应，学习了

这个在前面的帖子里其实有谈到

马黑黑 发表于 2022-2-10 16:58

红影 发表于 2022-2-10 15:11
音乐也可以拖动的，非常清楚的讲解，谢谢黑黑

确切地说是链接在web里可以拖动

红影 发表于 2022-2-10 19:06

马黑黑 发表于 2022-2-10 16:57
这个在前面的帖子里其实有谈到

是的，继续巩固一下这个概念也是对的{:4_204:}

红影 发表于 2022-2-10 19:07

马黑黑 发表于 2022-2-10 16:58
确切地说是链接在web里可以拖动

还是习惯叫它们的名称，比如音乐、图片什么的，虽然它们的表现都是链接{:4_173:}

马黑黑 发表于 2022-2-11 08:10

红影 发表于 2022-2-10 19:07
还是习惯叫它们的名称，比如音乐、图片什么的，虽然它们的表现都是链接

链接的行为表现，是点击后它会打开一个页面，凡具备这样的特性的，不论其外在观感如何、指向何种类型资源，它们都是链接。

马黑黑 发表于 2022-2-11 08:11

红影 发表于 2022-2-10 19:06
是的，继续巩固一下这个概念也是对的

{:4_181:}

红影 发表于 2022-2-11 12:08

马黑黑 发表于 2022-2-11 08:10
链接的行为表现，是点击后它会打开一个页面，凡具备这样的特性的，不论其外在观感如何、指向何种类型资源 ...

嗯嗯，明白了{:4_187:}

马黑黑 发表于 2022-2-11 12:20

红影 发表于 2022-2-11 12:08
嗯嗯，明白了

{:5_108:}
页: [1]
查看完整版本: JS：音乐锚的拖动与播放演示