Drag mousemove event

  1. 2 weeks ago
    Edited 2 weeks ago by Humberto N

    Hi,
    I'm tinkering a way to control an audio file volume while sliding an object. I think the best way is to attach a mouse move or drag event to a function that changes the audio file volume.

    I started trying to make the slider object (its an image) draggable,

    $( "#obj98" ).draggable({
      drag: function( event, ui ) {
     
        console.log( ui.position.top );
      }
    });

    but the drag event never triggers, and I gives an error "TypeError: undefined is not an object (evaluating 'a.browser.msie')"

    Then I tried to use jQuery mousemove, but I'm unable to get it work

    $("#obj140").mousemove(function( event ) {
      console.log(event.pageX + ", " + event.pageY);
    });

    #obj140 is an interactive area.

    Any suggestions to achieve this?

  2. 4 days ago

    Found a way out: using the vanilla javascript mouse events:

    let el = document.getElementById("obj140");
    let slide = document.getElementById( "obj98" );
    let azul = document.getElementById( "obj132" );
    
    let isMoving = false;
    let x = 0, y = 0;
    
    el.addEventListener("mousedown", (e) => {
        console.log(e.offsetX, e.offsetY);
        y = e.offsetY;
        x = e.offsetX;
        isMoving = true;
    });
    
    el.addEventListener("mousemove", (e) => {
        if (isMoving) {
            let vol = 1 - (e.offsetY) / 144 ;
            console.log( e.offsetY, vol );
            slide.style.top = e.pageY + "px";
            azul.volume = vol;
        }
    });
    
    
    el.addEventListener("mouseup", (e) => {
        console.log(e.offsetX, e.offsetY);
        y = e.offsetY;
        x = e.offsetX;
        isMoving = false;
    })
    
    window.addEventListener('mouseup', function(event){
        isMoving = false;
    })
 

or Sign Up to reply!