How to suppress `ui-draggable-handle` and `ui-draggable-dragging` on jQuery UI draggable?

Question

According to the jQuery UI docs, setting the addClasses option to false "will prevent the ui-draggable class from being added" to the draggable element: http://api.jqueryui.com/draggable/#option-addClasses

And it works as described.

However, I don't see a way to prevent the other ui-draggable-* classes from being added. It still adds ui-draggable-handle and ui-draggable-dragging .

I made a fiddle to demonstrate the problem: https://jsfiddle.net/j6hb4yrr/

Is there a way to prevent it from adding any classes at all?

Answer 1

You can override the functions so that the classes aren't added, which is in my solution below. However, these classes are probably added for a reason so be careful.

Overriding _create, _mouseStart and _mouseUp

The only line changed on the _create function is the this._setHandleClassName(); . which will prevent ui-draggable-handle from being added when the draggable element is initialised.

The only line changed in _mouseStart is this._addClass( this.helper, "ui-draggable-dragging" ); which adds the ui-draggable-dragging class when the draggable element is first being dragged.

I then had to change a whole block in the _mouseUp function since it required the handle ( ui-draggable-handle ). The following block was removed:

// Only need to focus if the event occurred on the draggable itself, see #10527
// if ( this.handleElement.is( event.target ) ) {

    // The interaction is over; whether or not the click resulted in a drag,
    // focus the element
//    this.element.trigger( "focus" );
//}

Add these 3 above your initialisation

$.ui.draggable.prototype._create = function() {
    if ( this.options.helper === "original" ) {
        this._setPositionRelative();
    }
    if ( this.options.addClasses ) {
        this._addClass( "ui-draggable" );
    }
    // this._setHandleClassName(); <- only line changed

    this._mouseInit();
};

$.ui.draggable.prototype._mouseStart = function( event ) {
    var o = this.options;

    //Create and append the visible helper
    this.helper = this._createHelper( event );

    // this._addClass( this.helper, "ui-draggable-dragging" ); <- only line changed

    //Cache the helper size
    this._cacheHelperProportions();

    //If ddmanager is used for droppables, set the global draggable
    if ( $.ui.ddmanager ) {
        $.ui.ddmanager.current = this;
    }

    /*
         * - Position generation -
         * This block generates everything position related - it's the core of draggables.
         */

    //Cache the margins of the original element
    this._cacheMargins();

    //Store the helper's css position
    this.cssPosition = this.helper.css( "position" );
    this.scrollParent = this.helper.scrollParent( true );
    this.offsetParent = this.helper.offsetParent();
    this.hasFixedAncestor = this.helper.parents().filter( function() {
        return $( this ).css( "position" ) === "fixed";
    } ).length > 0;

    //The element's absolute position on the page minus margins
    this.positionAbs = this.element.offset();
    this._refreshOffsets( event );

    //Generate the original position
    this.originalPosition = this.position = this._generatePosition( event, false );
    this.originalPageX = event.pageX;
    this.originalPageY = event.pageY;

    //Adjust the mouse offset relative to the helper if "cursorAt" is supplied
    ( o.cursorAt && this._adjustOffsetFromHelper( o.cursorAt ) );

    //Set a containment if given in the options
    this._setContainment();

    //Trigger event + callbacks
    if ( this._trigger( "start", event ) === false ) {
        this._clear();
        return false;
    }

    //Recache the helper size
    this._cacheHelperProportions();

    //Prepare the droppable offsets
    if ( $.ui.ddmanager && !o.dropBehaviour ) {
        $.ui.ddmanager.prepareOffsets( this, event );
    }

    // Execute the drag once - this causes the helper not to be visible before getting its
    // correct position
    this._mouseDrag( event, true );

    // If the ddmanager is used for droppables, inform the manager that dragging has started
    // (see #5003)
    if ( $.ui.ddmanager ) {
        $.ui.ddmanager.dragStart( this, event );
    }

    return true;
}

$.ui.draggable.prototype._mouseUp = function( event ) {
    this._unblockFrames();

    // If the ddmanager is used for droppables, inform the manager that dragging has stopped
    // (see #5003)
    if ( $.ui.ddmanager ) {
        $.ui.ddmanager.dragStop( this, event );
    }

    // Following block removed since handle doesn't exist anymore

    // Only need to focus if the event occurred on the draggable itself, see #10527
    // if ( this.handleElement.is( event.target ) ) {

        // The interaction is over; whether or not the click resulted in a drag,
        // focus the element
    //    this.element.trigger( "focus" );
    //}

    return $.ui.mouse.prototype._mouseUp.call( this, event );
}

You can see this working in action here: https://jsfiddle.net/j6hb4yrr/3/

You can see where I've got the initial functions from by looking here .

My first, hacky solution

If you are unable to override the classes above, as a last resort, try this but it's definitely not the way to do it .

It looks like ui-draggable and ui-draggable-handle get added when the draggable element is initialised. The ui-draggable-dragging when the dragging begins.

You could just remove them using the events listed in the API.

$('#noclass').draggable({
    addClasses: false,
    create: function() {
        $(this).removeClass('ui-draggable');
        $(this).removeClass('ui-draggable-handle');
    },
    start: function() {
        $(this).removeClass('ui-draggable-dragging');
    }
});

This is demoed here: https://jsfiddle.net/j6hb4yrr/1/

Hope this helps!