我可以将图像拖放到一个 div 中。我有2张图片。我的问题是，当图片 1“carrots.jpg”被拖放到 div 中以播放视频时，让我们说“video 1”，当图片 2“pepper.png”被拖放到 div 中以播放“video”时2”播放。我希望视频显示在弹出窗口中。我该怎么做呢？这是我的一些代码，用于显示我是如何执行拖放事件的。
#div1 {width:20%;height:20%;
position:absolute;
left:50%;
top:50%;
margin-right: -50%;
transform: translate(-50%, -50%);
z-index:-1;
}
#drag2{width:20%; height:20%; position:absolute;
left:50%;
top:50%;
margin-right: -50%;
transform: translate(-50%, -50%);
z-index:-2;
}
#drag1{ width:10%; height:10%;
position:absolute;
top:50%;
left:20%;
margin-right: -20%;
transform: translate(-20%, -25%);
z-index:-3;
}
#drag3{ width:10%; height:10%;
position:absolute;
top:70%;
left:30%;
margin-right: -30%;
transform: translate(-30%, -70%);
z-index:-3;
}
</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));
ev.target.removeChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag2" src="Pot.jpg" draggable="false"
ondragstart="drag(event)" >
<img id="drag1" src="carrots.jpg" draggable="true"
ondragstart="drag(event)" >
<img id="drag3" src="pepper.png" draggable="true"
ondragstart="drag(event)" >
</body>
</html>
最佳答案
我假设“显示在弹出窗口中”是指“在同一窗口中弹出”，因为实际的弹出窗口很烦人，每个人都讨厌它们，而且浏览器经常阻止它们。
您可以将视频从一开始就放在您的 HTML 文档中，但隐藏起来，使用 CSS 中的“display = none”。在您的 drop(ev) 函数中，您随后显示其中一个视频:
if (data == 'drag1')
var video = document.getElementById('video1');
else
video = document.getElementById('video2');
video.style.display = 'block';
video.play();
或者，您可以将拖动源的 ID 转换为视频的 ID，而不是 if 语句，如果您对它们进行编号的话:
var video = document.getElementById('video' + data.slice(-1))
或者您可能将视频包裹在一个绝对定位的 div 或其他东西中以在其周围提供一个框架，在这种情况下，框架将是带有“display = none”的元素。
关于javascript - 在 HTML5 中，如何通过将特定图像拖放到 div 中来弹出特定视频播放器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29088821/