除拖动时的敲除单击绑定

Question

I have sliders on my site that allow the user to select via dragging, or clicking on an item. When they drag, the item closest to the vertical center of the parent is chosen.

CodePen Demo

The problem is that the Knockout click binding is being bound before the jQuery UI draggable option (implemented in a custom binding).

To reproduce, try clicking and dragging on the bottom number, and move it up a little (but not in the center). Try doing that a few times, as it seems to work correctly on the first drag... sometimes.

The binding basically calls .draggable , and updates an observable when dragging stops.

The HTML is set up like this.

<ul data-bind="slideSelect: thing, foreach: nums">
  <li data-bind="click: $root.thing.set($data), text: $data">1</li>
</ul>

Is there any way to make the draggable element stop the li s click events from firing? I'd like to do it in the cleanest fashion possible.

Answer 1

did you try event.preventDefault(); in on drag event handler? the idea is if you detect drag event then stop the event bubbling. if click happens before drag then i think you might have to wait to see if drag happens then complete the action.