Jquery 可拖动包含 - 选择器不工作

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>

有关可拖动小部件选项的更多信息here。

Jquery 可拖动包含 - 选择器不工作

Jquery dragabble containment - selector not working

jquery

jquery-ui