В настоящее время я пытаюсь сделать таблицу перетаскивания html с разными континентами. У человека будет возможность перетащить правый континент в div, где он предположительно будет. Я сделал все теги div и перетащил функции n drop, но то, что я тоже хочу добавить, является звуковым. У меня два звука справа.mp3 и неправильный.mp3. Я хочу, чтобы они могли играть, когда человек попадает на правильный континент в нужное место, а когда он ошибается (правый - как правый.mp3, а когда неправильный - неправильно. Я пробовал много разных способов делать звуки, но, к сожалению, я не мог заставить его работать правильно. Если есть кто-то, кто знает, как это сделать, я был бы действительно прекрасен, если бы вы показали мне, как именно он выглядит в коде. Ниже приведен код, который я сделал до сих пор. Спасибо.HTML drag n drop sound
P.S Прошу прощения за мой английский, поскольку это не мой первый язык и извините за любые неудобства, которые он вызвал. Благодарю вас.
Код:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1
{float:left; width:500px; height:250px;border:1px solid;
position: absolute;
background-image:url('Winkel_triple_projection_SW.jpg');
background-size:500px 255px;
background-repeat: no-repeat;
z-index: -10;
}
#div2
{
width:80px; height:108px; margin:10px;border:1px solid #aaaaaa;
background: white;
z-index: -1;
position: absolute;
margin-top: 100px;
margin-left: 120px;
}
#americainside
{
width:100px; height:150px;border:1px solid #aaaaaa;
}
#div3
{
width:95px; height:100px; margin:10px;border:1px solid #aaaaaa;
background: white;
z-index: -2;
position: absolute;
margin-left: 90px;
}
#northmurica
{
width:100px; height:130px;border:1px solid #aaaaaa;
}
#div4
{
width:95px; height:100px; margin:10px;border:1px solid #aaaaaa;
background: white;
z-index: -1;
position: absolute;
margin-top: 80px;
margin-left: 220px;
}
#Africa
{
width:100px; height:129px;border:1px solid #aaaaaa;
}
#div5
{
width:200px; height:80px; margin:10px;border:1px solid #aaaaaa;
background: white;
z-index: -1;
position: absolute;
margin-top: 0px;
margin-left: 232px;
}
#Europe
{
width:210px; height:120px;border:1px solid #aaaaaa;
}
#div6
{
width:71px; height:58px; margin:10px;border:1px solid #aaaaaa;
background: white;
z-index: -1;
position: absolute;
margin-top: 140px;
margin-left: 390px;
}
#Australia
{
width:100px; height:100px;border:1px solid #aaaaaa;
}
#div7
{
width:300px; height:40px; margin:10px;border:1px solid #aaaaaa;
background: white;
z-index: -1;
position: absolute;
margin-top: 210px;
margin-left: 90px;
}
#Southpole
{
width:355px; height:70px;border:1px solid #aaaaaa;
}
#right
{ width:360px;
border:5px solid #aaaaaa;
float:right;
margin-right: 30%;
}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<div id="right">
<div id="americainside" ondrop="drop(event)" ondragover="allowDrop(event)">
South America
<img src="South america.png" draggable="true" ondragstart="drag(event)"
id="drag2" width="80px" height="108px"></div>
<div id="northmurica" ondrop="drop(event)" ondragover="allowDrop(event)">
North America
<img src="North america.png" alt="North America" draggable="true" ondragstart="drag(event)"
id="drag1" width="95px" height="100px"></div>
<div id="Africa" ondrop="drop(event)" ondragover="allowDrop(event)">
Africa
<img src="Africa.png" draggable="true" ondragstart="drag(event)"
id="drag3" width="95px" height="100px"></div>
<div id="Europe" ondrop="drop(event)" ondragover="allowDrop(event)">
Europe
<img src="Europe.png" draggable="true" ondragstart="drag(event)"
id="drag4" width="200px" height="80px"></div>
<div id="Australia" ondrop="drop(event)" ondragover="allowDrop(event)">
Australia
<img src="Australia.png" draggable="true" ondragstart="drag(event)"
id="drag5" width="71px" height="58px"></div>
<div id="Southpole" ondrop="drop(event)" ondragover="allowDrop(event)">
Southpole
<img src="south pole.png" draggable="true" ondragstart="drag(event)"
id="drag6" width="350px" height="40px"></div>
</div>
</body>
</html>
Я знаю, что есть другие вещи, которые я могу использовать для этого, но я хочу сделать это с HTML. Тем не менее, я не против, если вы предложите другие возможные варианты. Я, очевидно, не прошу кого-либо сделать всю работу, но если бы вы могли хотя бы показать мне один пример, это было бы здорово. Спасибо.
Редактировать: Я также ищу кнопку, которая очистит теги div после их перемещения где-нибудь.
Редактировать 2: Я добавил функцию воспроизведения, как предложил Александр Т, но я уверен, что здесь что-то не так.
Код:
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.playSound;
}
var path = 'cat.mp3'
function playSound(path) {
var sound = new Audio(path);
sound.play();
}
</script>
Это не будет работать. Наверное, я не называю функцию правильно. Если кто-нибудь может показать мне, как это сделать правильно. Спасибо.
Редактировать: Так выглядит, но все еще не работает. Не уверен, что я делаю неправильно здесь.
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
playSound("catSound");
}
function playSound(path) {
var sound = new Audio(path);
sound.play();
}
</script>
Я вижу. Но как я могу заставить его играть, когда предметы попадают в окно? – user2919681
Когда вы говорите, что путь должен быть строкой с курсом u, означают что-то вроде этого? var path = '/audio/rightSound.mp3' , а затем путь – user2919681
'функция drop (ev) { ev.preventDefault(); var data = ev.dataTransfer.getData ("Текст"); ev.target.appendChild (document.getElementById (данные)); ev.playSound; } ' должно выглядеть так: ' функция drop (ev) { ev.preventDefault(); var data = ev.dataTransfer.getData ("Текст"); ev.target.appendChild (документ.getElementById (данные)); playSound ("/ audio/rightSound.mp3"); } ' –