CODEWITHSUNDEEP
jqueryjquery-ui
Mia Davis
Mia Davis

Reputation: 131

Jquery dragabble containment - selector not working

My JQuery draggable containment is not working .It keeps going beyond the boundaries set for it. Any help is appreciated.

     $(function() {
        $( "#crop_square" ).draggable();
        containment: "#area_c"


     });

    <div  id ="area_c" style="width:300px;height:300px;background:blue"  >

           <div id="crop_square"      style="width:100px;height:100px;border:2px solid black;background:none"></div>

     </div>

Upvotes: 0

Views: 34

Answers (1)

tcj
tcj

Reputation: 1675

You're not appending the containment option correctly, do it this way (passing the option as an argument to the plugin call) :

 $( "#crop_square" ).draggable({
    containment: "#area_c"
 });

Working snippet below :

 $(function() {
        $( "#crop_square" ).draggable({	containment: "#area_c" });
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div  id ="area_c" style="width:300px;height:300px;background:blue"  >

           <div id="crop_square"      style="width:100px;height:100px;border:2px solid black;background:none">drag</div>

     </div>

More infos on the draggable widget options here.

Upvotes: 1

Related Questions