disableui and containment issues

[yarekc]

I got a bug with this config:

            dragit: {
                disableui:true,
                containment: [10,10,50,10]
            },

when disableui is set to true, when I click on the header of JSPanel, the whole JSPanel jumps dow, (teh JSPanel moves down like 30 pixels suddenly and I drag some blank space)

When I set disableui to false, it works fine... except containment does not seem to work any more !

Any idea ?

[Flyer53]

@yarekc I don't seem to be able to reproduce this "bug" on my machine. Can you please show me your full panel config. Do you use option container e.g.?

Are the jsPanels the only elements that need to be dragged?

[yarekc]

Here is the bug : http://prntscr.com/lgc2z9

You can test it in : https://html5-chat.com/chat2/54

$.jsPanel({
            selector: '#tabs',
            headerTitle:'<img src="/img/webcam.svg" width="32px" height="32px"> ' + chatHTML5.traductions.myWebcam,
            position: {
                left: left,
                top:  top
            },
            container:'#container',
            content:  myWebcamDiv,
            contentSize: {width: width, height: height},
            headerControls: {
                iconfont: 'font-awesome',
                close: 'remove',
                maximize:'remove',
                minimize:'remove'
            },
            maximizedMargin: {
                top:    10,
                right:  20,
                bottom: 50,
                left:   20
            },
            dragit: {
                disableui:true,
                containment: [10,10,50,10]
            },
            draggable: {
                containment: "parent"
            },

            resizable: {
                handles:   'ne, se, sw, nw',
                autoHide:  false,
                minWidth:  220,
                minHeight: 80,
                aspectRatio: true
            },
            id:'myWebcamDraggable'
        });

[yarekc]

and when I remove

dragit: {
                disableui:true,
                containment: [10,10,50,10]
            },

This works.. on desktop, but not on mobile ("touch" )

[Flyer53]

@yarekc Ok, there are at least 2 issues on first sight:

• there is no option.selector in jsPanel v3.x - delete that line (although this is not a cause for your issue)
• either use jquery-ui draggable OR the built-in dragit interaction. You can't use both!! Since the available parameters for those 2 tools are not the same I suggest you check out which tool offers the parameters that best fit your needs and stick to that (the same principle applies to jquery-ui resizable visa built-in resizeit).

Please change that first and see how it works out then.

PS: I made a quick check with the link you posted above on a Windows 8.1 machine with FF and Chrome and did not have issues. I'll check on a Windows 10 machine as well as soon as I have time...

Update: Checked on Windows 10 with FF, Chrome, Edge and did not have any issues there as well...

[Flyer53]

@yarekc Any news on this issue? You didn't respond to my last post for 2 months now.

[Flyer53]

@yarekc You did not respond to this issue for almost 4 months now. So I assume it's not of any significance anymore and close it.