Enable drag and drop for any element in your WordPress website

gistfile1.txt

<!-- Get the jQuery library from wordpress to frontend: This is a PHP snippet use with your theme or a code snippet plugin-->
function enqueue_jquery_ui() {
	wp_enqueue_script('jquery-ui-draggable');
}
add_action('wp_enqueue_scripts', 'enqueue_jquery_ui');



/*jQuery to make any element dragable on the website*/
jQuery(document).ready(function($) {
    $('#floating-social').draggable();
});


/*Change element css while moving or left on the screen*/
jQuery(document).ready(function($) {
    var draggableBox = $('#floating-social');

    draggableBox.draggable({
        cursorAt: { top: 0, left: 0 }, // Center the draggable element at the mouse cursor
        drag: function(event, ui) {
            // Remove border radius on drag
            $(this).css('border-radius', '42px');
        },
        stop: function(event, ui) {
            // Get position of the box after dragging
            var position = $(this).position();
            var boxWidth = $(this).outerWidth();
            var boxHeight = $(this).outerHeight();

            // Check if the box is at the right corner
            if (position.left + boxWidth >= $(window).width()) {
                $(this).css('border-radius', '42px 0 0 42px');
            } else if (position.left <= 0) {
                // Check if the box is at the left corner
                $(this).css('border-radius', '0 42px 42px 0');
            } else {
                // Apply default border radius
                $(this).css('border-radius', '42px');
            }
        }
    });

    // Change cursor to 'grab' when hovering over the draggable box
    draggableBox.on('mouseover', function() {
        $(this).css('cursor', 'grab');
    });

    draggableBox.on('mouseout', function() {
        $(this).css('cursor', 'default');
    });

    // Change cursor to 'grabbing' when mouse button is pressed
    draggableBox.on('mousedown', function() {
        $(this).css('cursor', 'grabbing');
    });

    draggableBox.on('mouseup', function() {
        $(this).css('cursor', 'grab');
    });
});