如何在可拖动的 jQuery UI 上抑制 `ui-draggable-handle` 和 `ui-draggable-dragging`？

Question

根据 jQuery UI 文档，将 addClasses 选项设置为 false“将阻止 ui-draggable 类被添加”到可拖动元素： http://api.jqueryui.com/draggable/#option-addClasses

它的工作原理和描述的一样。

但是，我看不到阻止添加 other ui-draggable-* 类的方法。它仍然添加了ui-draggable-handle 和ui-draggable-dragging。

我做了一个小提琴来演示这个问题： https://jsfiddle.net/j6hb4yrr/

有没有办法阻止它添加任何类？

Answer 1

您可以覆盖这些函数，以便不添加类，这在我下面的解决方案中。但是，添加这些类可能是有原因的所以要小心。

覆盖 _create、_mouseStart 和 _mouseUp

_create 函数上唯一更改的行是this._setHandleClassName();。这将防止在初始化可拖动元素时添加ui-draggable-handle。

_mouseStart 中唯一更改的行是 this._addClass( this.helper, "ui-draggable-dragging" );，它在第一次拖动可拖动元素时添加了 ui-draggable-dragging 类。

然后我不得不更改 _mouseUp 函数中的整个块，因为它需要句柄 (ui-draggable-handle)。删除了以下块：

// 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" );
//}

在您的初始化上方添加这 3 个

$.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 );
}

你可以在这里看到这个工作：https://jsfiddle.net/j6hb4yrr/3/

您可以通过查看 here 来了解我从哪里获得初始函数。

我的第一个 hacky 解决方案

如果您无法覆盖上面的类，作为最后的手段，试试这个，但它绝对不是这样做的方法。

看起来ui-draggable 和ui-draggable-handle 是在初始化可拖动元素时添加的。开始拖动时的ui-draggable-dragging。

您可以使用 API 中列出的事件删除它们。

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

这里有演示：https://jsfiddle.net/j6hb4yrr/1/

希望这会有所帮助！