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

Question

根据 jQuery UI 文档，将可拖动元素的 addClasses 选项设置为 false "will prevent the ui-draggable class from being added"： http://api.jqueryui.com/draggable/#option-addClasses

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

但是，我没有找到阻止添加 other ui-draggable-* 类的方法。它仍然添加 ui-draggable-handle 和 ui-draggable-dragging.

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

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

Answer 1

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

覆盖 _create、_mouseStart 和 _mouseUp

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

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

然后我不得不更改 _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 解决方案

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

看起来 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/

希望对您有所帮助！

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

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

jquery

jquery-ui

jquery-ui-draggable