10

I need to have custom handles for jQuery UI resizable elements that are not children of this element. I tried doing it the way it's documented on jQuery UI documentation page but I can't get this to work and am running out of ideas why.

This is my example setup (not working):

HTML

<div id="wrapper">
  <div id="resize-me"></div>
</div>

<div class="ui-resizable-handle ui-resizable-n" id="n-resize-handle"></div>
<div class="ui-resizable-handle ui-resizable-e" id="e-resize-handle"></div>
<div class="ui-resizable-handle ui-resizable-s" id="s-resize-handle"></div>
<div class="ui-resizable-handle ui-resizable-w" id="w-resize-handle"></div>
<div class="ui-resizable-handle ui-resizable-ne" id="ne-resize-handle"></div>
<div class="ui-resizable-handle ui-resizable-se" id="se-resize-handle"></div>
<div class="ui-resizable-handle ui-resizable-sw" id="sw-resize-handle"></div>
<div class="ui-resizable-handle ui-resizable-nw" id="nw-resize-handle"></div>

JS

$('#resize-me').resizable({
  handles: {
    n: $('#n-resize-handle'),
    e: $('#e-resize-handle'),
    s: $('#s-resize-handle'),
    w: $('#w-resize-handle'),
    ne: $('#ne-resize-handle'),
    se: $('#se-resize-handle'),
    sw: $('#sw-resize-handle'),
    nw: $('#nw-resize-handle')
  }
});

I prepared demo of this problem on codepen.io

I searched all over the net for examples of how to implement something like that. Maybe someone here has done that and could point out what I'm missing?

I already seen this SO question but I think it's not a duplicate because the answer to that is not viable for production code, as stated by the answer's author.

Any help would be greatly appreciated.

Community
  • 1
  • 1
Arek
  • 219
  • 2
  • 9
  • Move all your handlers inside wrapper. They are there but as they are positioned absolute so you cannot see them. Also give them height or width and some border-color or background etc. Something like http://codepen.io/aamirafridi/pen/zKInJ – Aamir Afridi Jan 23 '14 at 17:00
  • Humm according to http://esbueno.noahstokes.com/post/426818005/jquery-ui-resizable-custom-handle-syntax your handlers need to be inside the resizable element. Like this http://codepen.io/aamirafridi/pen/zKInJ – Aamir Afridi Jan 23 '14 at 17:02
  • I know how to get them to work when they are inside the wrapper. I explicitly needed them to be outside of it. Thanks anyway for your suggestions. – Arek Jan 29 '14 at 14:52
  • I am quite sure it won't be possible as when you drag the handlers, jQuery UI calculates its position according to its parent. – Aamir Afridi Jan 30 '14 at 11:42
  • Yeah, I figured that. But then there's this quote, taken from [jquery ui api docs](http://api.jqueryui.com/resizable/#option-handles) „If the handle is not a child of the resizable, you can pass in the DOMElement or a valid jQuery object directly” – Arek Jan 31 '14 at 11:16
  • file a bug here http://bugs.jqueryui.com :| – Aamir Afridi Jan 31 '14 at 14:17

2 Answers2

1

You can try this workaround. I Insert dinamically div´s in div resize-me.

HTML

<div id="wrapper">
    <div id="resize-me"></div>
</div>
<div id="divHandles">
    <div class="ui-resizable-handle ui-resizable-n" id="n-resize-handle"></div>
    <div class="ui-resizable-handle ui-resizable-e" id="e-resize-handle"></div>
    <div class="ui-resizable-handle ui-resizable-s" id="s-resize-handle"></div>
    <div class="ui-resizable-handle ui-resizable-w" id="w-resize-handle"></div>
    <div class="ui-resizable-handle ui-resizable-ne" id="ne-resize-handle"></div>
    <div class="ui-resizable-handle ui-resizable-se" id="se-resize-handle"></div>
    <div class="ui-resizable-handle ui-resizable-sw" id="sw-resize-handle"></div>
    <div class="ui-resizable-handle ui-resizable-nw" id="nw-resize-handle"></div>
</div>

JS $(document).ready(function () { appliResize("#resize-me"); });

function appliResize(elementName){
        $.each($("#divHandles").find(".ui-resizable-handle"), function (index, value){
           $(elementName).append($(value).clone().attr('id',$(value).attr('id')+elementName.slice(1)));
    });
    $('#resize-me').resizable({
        handles: {
            n: '#n-resize-handle'+elementName.slice(1),
            e: '#e-resize-handle'+elementName.slice(1),
            s: '#s-resize-handle'+elementName.slice(1),
            w: '#w-resize-handle'+elementName.slice(1),
            ne: '#ne-resize-handle'+elementName.slice(1),
            se: '#se-resize-handle'+elementName.slice(1),
            sw: '#sw-resize-handle'+elementName.slice(1),
            nw: '#nw-resize-handle'+elementName.slice(1)
        }
    });
}
Samuel
  • 1,149
  • 8
  • 25
0

Not the answer you were hoping for, but - this is an open (unresolved) bug with jQuery UI. http://bugs.jqueryui.com/ticket/9658

Update: this bug was fixed in jQueryUI 1.11.4, which was released in March 2015.

Daniel Baird
  • 2,239
  • 1
  • 18
  • 24
James Lee Baker
  • 797
  • 6
  • 9
  • I think, unfortunately, that is the answer to this question. I will mark it as accepted for anyone looking for the info about this issue. Thanks! – Arek Jun 23 '14 at 17:56