Starting dragger without clicking on it

[babysteps]

Hello,

This is a continuation of issue #89. Please see attached image. I have a drag container (black bar) and a dragger (red dot). I already have draggabilly setup to drag when you mousedown on the dot. What I would like to do is start draggabilly dragging when the user clicks on the container (where the arrow is). I have already written the code to move the dot to where the arrow is (where the user moused down), but at that point I would like draggabilly to start dragging the dot. I tried adding $(dragger).mousedown() to the $(container).mousedown event, but that doesnt start the dragging. Is there a way to do this?

Thanks in advance for your help.

[desandro]

Thanks for reporting this issue. I'm sorry to say there's no easy way to do this. Draggabilly can somewhat work as a range slider input, but you're likely better off using another widget that's specifically designed for that, likely a range input polyfill.

[babysteps]

I still think you may be misunderstanding my question. I am not looking for a range slider. I am just looking for the dragger dot to begin dragging when I click elsewhere on the container. In the picture above, if I clicked where the arrow is, I want the dot to move there and then follow my mouse as I drag.

https://jqueryui.com/slider/#default is an example of this behavior. click anywhere on the bar (not the dot) and start dragging, you will see that the drag dot moves to where you click and then drags as you move your mouse. your plugin is far superior to the jquery slider ui element and i would like to continue using it, I just need to figure out this one feature. If you added a method like .startDrag() so that I could call that method and the dot would move to where my mouse is that would do it.

i would be willing to pay for your time to implement this feature and I think others would find it useful also.

thanks for your time. i hope we can make this happen.

[desandro]

Okay, you can hack this with Draggabilly. See demo on CodePen

// HACK - move knob on mouse down and fake a pointerDown event on it
sliderElem.addEventListener( 'mousedown', function( event ) {
  // only for sliderElem clicks, not on knob
  if ( event.target != sliderElem ) {
    return;
  }
  // move knob to where mouse is
  var rect = sliderElem.getBoundingClientRect();
  var x = event.pageX - rect.left - knobWidth / 2;
  x = Math.max( 0, Math.min( sliderWidth - knobWidth, x ) );
  knobElem.style.left = x + 'px';
  // trigger pointerDown event
  knobDraggie._pointerDown( event, event );
});

It works, but I can't confirm how well this hack works with other features (grid, position values, etc).

I recommend against this hack because Draggabilly is not designed for it, where as range input polyfills are. So while it may work, there's a chance of running into problems.