在 HTML5 中，如何通过将特定图像拖放到 div 中来弹出特定视频播放器？

Question

我可以将图像拖放到 div 中。我有2张图片。我的问题是，当图像 1 "carrots.jpg" 被拖放到 div 中以播放视频时，假设 "video 1" 以及图像 2 "pepper.png" 被拖放到 div 中div 供 "video 2" 播放。我希望视频显示在弹出窗口 windows 中。我该怎么做呢？这是我的一些代码，用于显示我是如何处理拖放事件的。

#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>

Answer 1

我假设 "show up in pop-up windows" 是指 "pop up in the same window"，因为实际的弹出窗口很烦人，每个人都讨厌它们，而且浏览器经常阻止它们。

您可以从一开始就将视频放入 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".[=14 的元素=]

在 HTML5 中，如何通过将特定图像拖放到 div 中来弹出特定视频播放器？

In HTML5 how do you make spefic video players pop up as a result of dropping and dragging spefic images into a div?

javascript

html

css

drag-and-drop

html5-video