Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

limit movement of jquery ui draggable outside frame borders

I am using jquery ui draggable in order to make a fieldset draggable by user, the whole page is loaded inside an iframe. the problem is that I can drag the fieldset outside the iframe borders, how I can stop that?

<iframe src='test.html'></iframe>

test.html

    <html>
<script>
$(".draggable").draggable();
</script>
<fieldset id='draggable'>testing</fieldset>
</html>
like image 682
Samer El Gendy Avatar asked Jan 29 '26 15:01

Samer El Gendy


1 Answers

Use the UI containment option

$('.draggable').draggable({
    containment: "parent";
});
like image 72
Roko C. Buljan Avatar answered Feb 01 '26 07:02

Roko C. Buljan



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!