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

Question

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

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

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

我做了一个 fiddle 来演示这个问题: 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 函数中的整个 block ，因为它需要句柄 (ui-draggable-handle)。以下 block 已被删除:

// 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 来了解我从哪里获得初始函数。 .

我的第一个黑客解决方案

如果您无法覆盖上述类，作为最后的手段，请尝试此操作，但这绝对不是这样做的方法。

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

希望这有帮助!