Jquery dragabble сдерживание - не работает селектор

Question

Моя перетаскиваемая оболочка JQuery не работает. Она продолжает выходить за установленные для нее границы. Любая помощь приветствуется.

     $(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>

Answer 1

Вы не добавляете опцию включения правильно, сделайте это так (передавая опцию в качестве аргумента вызову плагина):

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

Рабочий фрагмент ниже:

 $(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>

Дополнительные сведения о параметрах перетаскиваемого виджета здесь .