Question

我试图使用以下jfiddle

http://jsfiddle.net/karanmhatre/9tny5eh6/6/

在我的网站上，但似乎无法让它工作。我知道这个话题已被广泛讨论，我花了一整天的时间试图解决这个问题，但却无法弄清楚我做错了什么。我是新手，可以真正使用一些帮助！

<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop Video</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'>     </script>

<script type="text/javascript">

$(window).load(function(){

$(document).ready(function(){

$(".drag").draggable({
    revert: true,
    containment: "#content"
});
$(".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();
      }
});
});
}); // Closes window.load

</script>

<link rel="stylesheet" href="styles/layout.css" media="screen"/>
</head>
<body>

<div class="thumbs">
    <img class="drag one-half" videourl="http://www.w3schools.com/html/mov_bbb.mp4" oggurl="profile-amanda.ogv" id="image" src="http://www.bigbuckbunny.org/wp-content/themes/bunny/graphics/header1.jpg" />

    <img class="drag one-half last" videourl="http://www.w3schools.com/html/mov_bbb.mp4" oggurl="profile-amanda.ogv" id="image" src="http://www.bigbuckbunny.org/wp-content/themes/bunny/graphics/header2.jpg" />
</div>

<br style="clear:both;" />

<div id="video-container" class="drop">

</div>

</body>
</html>

Answer 1

我认为问题在于您的代码正在加载jquery，但是小提琴加载了jQuery 1.9.1和 jQuery UI 1.9.2

所以尝试在加载jQuery的行之后添加这一行

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

如何将jsfiddle整合到我的网页中

1 个答案: