Elementor widget not draggable

If you are experiencing an issue where an Elementor widget is not draggable, it could be due to a conflict with other scripts or plugins on your WordPress site. To troubleshoot this issue, you can try the following code snippet:

add_action( 'elementor/editor/after_enqueue_scripts', 'wpsnippets_disable_elementor_draggable' );
function wpsnippets_disable_elementor_draggable() {
    wp_add_inline_script( 'elementor-editor', 'jQuery( window ).on( "elementor:init", function() { elementor.hooks.addAction( "panel/open_editor/widget", function( panel, model, view ) { view.setSettings( "draggable", false ); } ); } );' );
}

This code snippet uses the elementor/editor/after_enqueue_scripts action hook to add an inline script that disables the draggable functionality for Elementor widgets. It targets the elementor-editor script and adds a custom JavaScript code that sets the draggable setting to false for each widget.

To use this code snippet, you can add it to your theme’s functions.php file or create a custom plugin. After adding the code, save the file and refresh the Elementor editor. The widgets should no longer be draggable.

This code snippet can be useful if you want to restrict the ability to drag and rearrange Elementor widgets. It can be handy in situations where you want to lock the widget positions or prevent accidental rearrangement by other users.

Examples

Example #1: Disabling Elementor widget dragging

This use case demonstrates how to disable the dragging functionality of an Elementor widget. By adding a custom JavaScript code snippet to the page, we can prevent users from dragging the widget around.

jQuery(document).on('elementor:init', function() {
    elementor.hooks.addFilter('elementor/widget/draggable', function(isDraggable, widget) {
        return false;
    });
});

In this code example, we use the elementor:init event to initialize our custom code. We then use the elementor.hooks.addFilter function to modify the elementor/widget/draggable filter. By returning false, we disable the dragging functionality for all widgets.

Example #2: Disabling dragging for specific Elementor widgets

This use case demonstrates how to disable dragging for specific Elementor widgets. By targeting specific widget types, we can prevent users from dragging those widgets while allowing dragging for others.

jQuery(document).on('elementor:init', function() {
    elementor.hooks.addFilter('elementor/widget/draggable', function(isDraggable, widget) {
        var disabledWidgets = ['widget-type-1', 'widget-type-2'];
        if (disabledWidgets.includes(widget.getWidgetType())) {
            return false;
        }
        return isDraggable;
    });
});

In this code example, we define an array disabledWidgets that contains the widget types we want to disable dragging for. We then check if the current widget’s type is included in this array using includes(). If it is, we return false to disable dragging for that widget.

Example #3: Disabling dragging for specific Elementor sections

This use case demonstrates how to disable dragging for specific Elementor sections. By targeting specific section IDs, we can prevent users from dragging those sections while allowing dragging for others.

jQuery(document).on('elementor:init', function() {
    elementor.hooks.addFilter('elementor/section/draggable', function(isDraggable, section) {
        var disabledSections = ['section-id-1', 'section-id-2'];
        if (disabledSections.includes(section.getSettings('id'))) {
            return false;
        }
        return isDraggable;
    });
});

In this code example, we define an array disabledSections that contains the section IDs we want to disable dragging for. We then check if the current section’s ID is included in this array using includes(). If it is, we return false to disable dragging for that section.