I have noticed that if jquery ui is loaded then jquery resizable does not work.

[handysolver]

[Sulstice]

Yeah I ran into this problem as well and kind of blocking the use of this library

[pmorch]

I'm guessing it is because jQueryUI also has a $().resizable() method. See also #17.

Since jQueryUI is orders of magnitude more popular, renaming the function this plugin creates on $.fn or at least having some way of cooperating with and not conflicting with jQueryUI would be useful.

[RickStrahl]

Definitely true... but if you're using jquery-ui you certainly don't need this plugin. It was created to avoid for the use case where a larger framework isn't available.

[thiscafer]

How do you use with jquery ui?

[dominicgan]

@thiscafer you can rename the function to make it work alongside jquery ui.

[taleteller]

Actually there is use of this method alongside jquery-ui, it allows me to specify and style an custom divider handle. I renamed it for myself as resizer but I would prefer to use the original npm package.

[RickStrahl]

Revisiting this after some thought I think it would be pretty easy to add a .resizableSafe() alias that would allow any components that use jQuery.resizable() to get a reliable reference to the plugin.

If made some changes for 0.35+ that do:

if ($.fn.resizableSafe)
        return;

$.fn.resizableSafe = function fnResizable(options) {
     ... main implementation
}

if (!$.fn.resizable)
   $.fn.resizable = $.fn.resizableSafe;

You should then be able to replace any reference to .resizable() with .resizableSafe() to co-exist with jquery.ui or any other component that also use .resizable():

<script>    
    $(".box").resizableSafe({
        handleSelector: "> .win-size-grip",
        onDragStart: function (e, $el, opt) {
            $el.css("cursor", "nwse-resize");
        },
        onDragStop: function (e, $el, opt) {
            $el.css("cursor", "");
        }
    });        
</script>