CODEWITHSUNDEEP
javascriptjqueryhtml
dotmartin
dotmartin

Reputation: 541

Disable HTML5 Drag & Drop for Range Inputs

Is there a way of disabling HTML5 drag and drop on a specific element inside a draggable element?

In my case we are building a list of items that all have settings, we want to be able to use <input type="range" /> inside of it. But whenever the user tries to drag the handle of the correctly rendered range input the whole draggable item starts its dragging cycle of events.

I have tried capturing the event in the range input to prevent default on it. But the dragstart event is not triggered on it.

The markup is roughly structured like this:

<div class="item_wrapper" draggable="true">
  <div class="field-group param_percent">
    <label for="param_card">Darken</label>
    <div class="parameter" data-default="0" data-value="">
      <input type="range" id="param_card_range" min="0" max="100" step="1" value="0">
    </div>
  </div>
</div>

Upvotes: 2

Views: 1713

Answers (2)

dotmartin
dotmartin

Reputation: 541

Listening to the dragstart event does nothing unless you actually enable the drag and drop features on the element where you want to handle the event. So I ended up adding the draggable="true" parameter to the input range. Then the dragstartevent gets triggered.

The handler should then simply prevent default and stop the event propagation.

  /**
   * Handler for the drag start event. This is needed to prevent the dragging of
   * list items in the case that this parameter is used in such.
   * Simply stop everything.
   * @param e
   * @returns {boolean}
   * @private
   */
  _dragStart: function(e) {
    e.preventDefault();
    e.stopPropagation();
  }

Upvotes: 1

hriziya
hriziya

Reputation: 1172

Try to disable element dragging on screen CSS like this.. https://gist.github.com/msuchodolski/41c9338f3a732379dc570142826ed76e

Here is working demo

/**
 *   MAKE ELECTRON APP FEEL MORE NATIVE
 *
 *   * Prevent dragging all HTML elements, specially:
 *   	- images
 *   	- links (anchors)
 *
 *   * Prevent text selection
 */

*, *::after, *::before {
	-webkit-user-select: none;
	-webkit-user-drag: none;
	-webkit-app-region: no-drag;
	cursor: default;
}
<div class="item_wrapper" draggable="true">
  <div class="field-group param_percent">
    <label for="param_card">Darken</label>
    <div class="parameter" data-default="0" data-value="">
      <input type="range" id="param_card_range" min="0" max="100" step="1" value="0">
    </div>
  </div>
</div>

Upvotes: 0

Related Questions