Question

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

它的工作原理如上所述。

但是，我没有办法阻止添加其他 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/

希望这有帮助！

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

1 个答案: