javascript - 使用 JqueryUI 拖动内联 SVG

Question

我正在尝试使用 JQuery UI 使内联 SVG 元素可拖动，以便我可以制作自定义视频控件。

不幸的是我运气不佳。我试过这个SO answer在我的代码中，但没有到达任何地方。我还成功地拖动了 SVG 图像，但不是内联的。难道只是 JQuery UI 不能很好地与内联 SVG 配合使用吗？

有什么建议的替代方案吗？

$(document).ready(function() {
          var v = document.querySelector("#vid");
          var b = document.querySelector("#progress");
          var x = document.querySelector("#draw_here");

          var vidTimer;
          var s;


          //wait for video and tracks to load
          var myVideoPlayer = document.getElementById('vid');
          myVideoPlayer.addEventListener('loadedmetadata', function() {

            $("#play_ball").draggable()
              .bind('mousedown', function(event, ui) {
                $(event.target.parentElement).append(event.target);
              })
              .bind('drag', function(event, ui) {
                event.target.setAttribute('x', ui.position.left);
              });

            
            //$("#play_ball").draggable({
            //  axis: "x",
            //  containment: 'parent'
            //});

            var videoControls = document.getElementById('videoControls'),
              play = document.getElementById('play'),
              playProgressInterval = false,
              progressContainer = document.getElementById("progress"),
              playProgressBar = document.getElementById("play_ball");


            // Get rid of the default controls
            v.removeAttribute('controls');

            handleButtonPresses();


            function handleButtonPresses() {
              // When the play button is clicked, playor pause the video.
              play.addEventListener('click', playPause, false);

              // When the play button is pressed, witch to the "Pause" symbol. 
              v.addEventListener('play', function() {
                play.title = 'Pause';
                play.innerHTML = '<span id="pauseButton">&#x2590;&#x2590;</span>';

                // Begin tracking video's progress.  
                trackPlayProgress();
              }, false);

              // When the pause button is pressed, switch to the "Play" symbol. 
              v.addEventListener('pause', function() {
                play.title = 'Play';
                play.innerHTML = '&#x25BA;';

                // Video was paused, stop tracking progress. 
                stopTrackingPlayProgress();
              }, false);


              // When the video has concluded, pause it. 
              v.addEventListener('ended', function() {
                this.currentTime = 0;
                this.pause();
              }, false);


              v.addEventListener('touchstart', function(e) {
                var sDate = new Date();
                sTime = sDate.getTime();;
                var touchobj = e.changedTouches[0]
                console.log(touchobj.target) // returns element touch point landed on
                  // var xPos =
                  // var yPos = 
                  // console.log("position is"+e.PageX + ", " + e.PageY);

                // console.log("position is" + xPos + ", " + yPos);

              }, false);

              v.addEventListener('touchend', function() {
                var eDate = new Date();
                eTime = eDate.getTime();;
                if (eTime - sTime >= 99) {
                  alert("you held it!");
                }

              }, false);
            }

            function playPause() {
              if (v.paused || v.ended) {
                if (v.ended) {
                  v.currentTime = 0;
                }
                v.play();
              } else {
                v.pause();
              }
            }

            function vidUpdate() {
              $scope.sliderV.value = parseInt(v.currentTime, 10);
              $scope.$broadcast('rzSliderForceRender');
            }

            // Every 50 milliseconds, update the play progress.  
            function trackPlayProgress() {
              (function progressTrack() {
                updatePlayProgress();
                vidUpdate();
                // pause at chapter breaks
                //ignore first cue
                for (var i = 1; i < cueS.length; i++) {
                  if (v.currentTime >= cueS[i].startTime - .10 && v.currentTime <= cueS[i].startTime + .10) {
                    v.currentTime += .3;
                    v.pause();

                  }
                }
                playProgressInterval = setTimeout(progressTrack, 50);
              })();
            }

            function updatePlayProgress() {
              playProgressBar.style.width = ((v.currentTime / v.duration) * (progressContainer.offsetWidth)) + "px";
              playProgressBar.setAttribute("cx", (4 + ((v.currentTime / v.duration) * 94) + "%"));
            }

            // Video was stopped, so stop updating progress. 
            function stopTrackingPlayProgress() {
              clearTimeout(playProgressInterval);
            }


          }); //ends wait for vid

        }); //ends doc ready

/* PROGRESS BAR */

#progress {
  position: absolute !important;
  left: 7%;
  height: 70%;
  width: 90%;
  cursor: pointer;
  z-index: 4;
}
#progress_box {
  height: 95%;
  width: 100%;
  border: 1px solid #292929;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background: #303030;
  /* Old browsers */
  background: -moz-linear-gradient(top, #303030 0%, #545454 49%, #545454 51%, #7e7e7e 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #303030 0%, #545454 49%, #545454 51%, #7e7e7e 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #303030 0%, #545454 49%, #545454 51%, #7e7e7e 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#303030', endColorstr='#7e7e7e', GradientType=0);
  /* IE6-9 */
  -webkit-box-shadow: 0 1px 0 #292929, 0 -1px 0 #292929;
  -moz-box-shadow: 0 1px 0 #292929, 0 -1px 0 #292929;
  box-shadow: 0 1px 0 #292929, 0 -1px 0 #292929;
  margin: 2px 0 0 5px;
  padding: 2px;
  overflow: hidden;
  z-index: 4;
}
#play_progress {
  display: block;
  height: 40%;
  width: 100%;
  background-color: #fff;
  background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), color-stop(.5, white), to(#e3e3e3));
  background: -moz-linear-gradient(top, #e3e3e3, white 50%, #e3e3e3);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  z-index: 4;
}
#play_time {
  float: right;
  margin: 7px 0 0 5px;
  font-size: 10px;
  font-weight: normal;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1;
  z-index: 4;
}
#spacer {
  display: block;
  width: 100%;
  height: 30%;
}
#sliderVideo {
  position: absolute;
  top: 50px;
  bottom: 50px;
  right: 1%;
}

<!DOCTYPE html>
<html>

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

<body>
  <div id="player">
    <video id="vid" controls>
      <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
    </video>
    <div id="videoControls">
      <button id="play" title="Play">&#x25BA;</button>
      <div id="progress">
        <svg xmlns="http://www.w3.org/2000/svg" id="draw_here" height="100" width="100%">
          <line id="play_bar" x1="5%" y1="15" x2="100%" y2="15" style="stroke:#7E7F81;stroke-width:2" />
          <circle id="play_ball" cx="4%" cy="15" r="13" fill="#B0C4DE" />
        </svg>
        <span id="spacer"></span>
      </div>
      <button id="instructorBtn" title="Instructor">!</button>
    </div>
  </div>
</body>

Answer 1

我会调试一下，看看能否解决问题。 我注意到的第一件事是你没有关闭你的 html 标签;)

还有为什么当你使用 jquery 时“document.querySelector”...

编辑:

您似乎使用了很多非 jquery 代码，目前正在清理您的代码，我将修复 slider 。

编辑2:

您忘记了在使用 slider 滑动后还需要更新视频进度，我也为此添加了代码。

编辑3:

这是一些工作代码:https://jsfiddle.net/seahorsepip/gLudkdd9/5/

它仍然很困惑并且工作有问题，你用 4% 和 94% 所做的事情也没有任何意义。

实际上，您甚至不需要 jquery ui 只是为了使其可拖动，使用 mousedown mousemove 和 mouseup 来编写它非常容易。

.