Vasily Kushakov February 2016

Dragging inline SVG with JqueryUI

I'm trying to get inline SVG elements to be draggable using JQuery UI, so that I can make custom video controls.

Unfortunately I've had little luck. I've tried this SO answer in my code but haven't gotten anywhere. I've also managed to get an SVG image dragging but not inline. Is it just that JQuery UI doesn't play well with inline SVG?

Any suggested alternatives?

$(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');

            handleButtonPres        

Answers


seahorsepip February 2016

I'll debug it and see if I can solve the problem. First thing I noticed is that you didn't close your html tag ;)

Also why "document.querySelector" when you use jquery...

Edit:

You seem to use a lot non jquery code, cleaning up your code currently and I'll fix the slider.

Edit2:

You have forgotten that you also need to update the video progress after sliding with the slider, I'm adding code for that too.

Edit3:

Here's some working code: https://jsfiddle.net/seahorsepip/gLudkdd9/5/

It's still messy and working buggy, the things you did with 4% and 94% don't make any sense either.

You actually don't even need jquery ui just to make it draggable, it's pretty easy to write it with mousedown mousemove and mouseup instead.

.

Post Status

Asked in February 2016
Viewed 2,828 times
Voted 5
Answered 1 times

Search




Leave an answer