jQuery Dragabble遏制-选择器不起作用

时间:2019-05-31 12:27:16

标签: jquery jquery-ui

我的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>

1 个答案:

答案 0 :(得分:1)

您没有正确地添加containment选项,请这样做(将选项作为参数传递给插件调用):

 $( "#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的更多信息。