使用 JqueryUI 拖动内联 SVG

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

不幸的是，我运气不佳。我已经在我的代码中尝试过这个 SO 答案，但一无所获。我还设法让 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>