Question

我遇到了一些脚本问题。对于一个项目，我有一个容器，这个容器有8个单独的缩略图，当拖入我的容器时需要播放相应的视频。我有90％的脚本工作，但在拖放方面有一些问题。

当缩略图被拖动到该位置时，它正在正确附加视频但缩略图然后在容器顶部冻结...它应该还原，但是当您拖动另一个视频时，它会恢复但第一次停留固定。然后当另一个被拖入容器时，这将在我的视频之上播放。我需要调整我的脚本：

将缩略图还原为其位置。
删除当前的所有视频。
附加新视频。
如果可能，自动播放视频。

这是我的剧本：

$(document).ready(function(){
    $(".drag").draggable({
        revert: true,
        containment: "#content"
    });
    $(".drop").droppable(
    { 
          drop: function (event, ui) 
          {
             var url = $(ui.draggable).attr('videourl');
             var oggurl = $(ui.draggable).attr('oggurl');
             var $videocontainer = $('#video-container');
             var $video = $('#video');

             $videocontainer.empty().append('<video id="video" controls width="400" height="300"><source src="'+url+'" type="video/mp4" /><source src="'+oggurl+'" type="video/ogg" /></video>');
             $video.get(0).play();
          }
    });
});

我的jsfiddle在这里： http://jsfiddle.net/9tny5eh6/5/

非常感谢提前。

Answer 1

如你的场景中所述，你不需要删除元素。你可以只使用拖动功能并检查坐标位置。如果坐标位置在容器中，那么你播放的视频不是

Answer 2

这里是小提琴： http://jsfiddle.net/karanmhatre/9tny5eh6/6/

<强> JS

$(".drop").droppable(
    { 
          drop: function (event, ui) 
          {
              $(".drag").animate({
                  top: "0px",
                  left: "0px"
              });
             var url = $(ui.draggable).attr('videourl');
             var oggurl = $(ui.draggable).attr('oggurl');
             var $videocontainer = $('#video-container');

             $videocontainer.empty().append('<video id="video" controls width="400" height="300"><source src="'+url+'" type="video/mp4" /><source src="'+oggurl+'" type="video/ogg" /></video>');
             $('#video').get(0).play();
          }
    });

在放置事件中，使用动画将所有.drag元素移动到原始位置。然后，使用$('#video')选择器选择您已将其添加到DOM中的视频 AFTER 。

您的解决方案的问题在于，当DOM尚未出现时，您正在引用DOM中的#video对象。

将缩略图还原回其位置。 - 完成

删除当前的所有视频。 - 完成

附加新视频。 - 完成

尽可能自动播放视频。 - 完成

使用jquery拖动到某个区域时播放多个视频

2 个答案: