HTML5：您如何针对被拖动然后放入div中的不同图像进行不同的事件？

Question

I'm having a problem where I have 2 Images and I want each when dropped and dragged into a div to play a different video. 我遇到一个问题，我有2张图片，我希望每张图片都拖放到div中以播放不同的视频。 Ie Image 1 plays Video 1 , Image 2 plays video 2. The problem is Images 1 and 2 both play the same video. 即，图像1播放视频1，图像2播放视频2。问题是图像1和2都播放相同的视频。 The Image id's are "drag1" and "drag3". 图片ID为“ drag1”和“ drag3”。 Again I would like when "drag1" is dragged and dropped then appended into the div for "video1" to play and when "drag3" is dragged and dropped into the div then appended for another video I haven't inputted yet to play. 同样，我想将“ drag1”拖放到div中然后添加到div中以便“ video1”播放，将“ drag3”拖放到div中之后再添加到另一个我尚未输入的视频中。 How do I do this? 我该怎么做呢？ Right now "drag1" and "drag3" both play "video1". 现在，“ drag1”和“ drag3”都播放“ video1”。 Here's an example of my code. 这是我的代码示例。

<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));


    var video = document.getElementById('video1');
     video.style.display = 'block';
     video.play();

    document.getElementById('video1').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        if(!e) { e = window.event; }
        video.style.display = 'none';
    }

}

</script>
</head>

<body>

<video id="video1" controls>
  <source src="carrots.mp4" type="video/mp4">
</video>

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

and this is the CSS3 这是CSS3

<style>
body {
    background: url(food-table.jpg);
     background-repeat: no-repeat;
    background-size: 100% 100%;
} 
html 
{ height:100%}

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

#video1{ width:50%; height: 30%;
position:absolute;
top:50%;
left:50%;
margin-right: -50%;
transform: translate(-50%, -50%);
display:none;
}

Answer 1

I would add an id to your source like: 我会在您的来源中添加一个ID，例如：

<video id="video1" controls>
  <source id="video1-source" src="carrots.mp4" type="video/mp4">
</video>

and then change the sources 'src' attribute to the appropriate source. 然后将来源的“ src”属性更改为适当的来源。

 var video = document.getElementById('video1');
 document.getElementById('video1-source').setAttribute('src', 'youNewSource');
 video.style.display = 'block';
 video.play();

HTML5：您如何针对被拖动然后放入div中的不同图像进行不同的事件？

问题描述

1 个解决方案

解决方案1
0 2015-03-19 16:27:16

HTML5：您如何针对被拖动然后放入div中的不同图像进行不同的事件？

问题描述

1 个解决方案

解决方案1 0 2015-03-19 16:27:16

解决方案1
0 2015-03-19 16:27:16