时间戳

首页 > 解决方案 > Jquery 可拖动包含 - 选择器不起作用

jquery - Jquery 可拖动包含 - 选择器不起作用

问题描述

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

标签： jqueryjquery-ui

解决方案

您没有正确附加包含选项，请这样做（将选项作为参数传递给插件调用）：

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

有关可拖动小部件选项的更多信息，请点击此处。

推荐阅读