禁用身体外的可拖动元素

时间:2014-07-26 11:44:25

标签: jquery css asp.net-mvc

当我拖动一个元素时。它走出了身体。如何在体内禁用或拖拽。

    <div id="drag" style="background-color:red;">
        <fieldset>
            <h2 class="fs-title">Login</h2>
            <h3 class="fs-subtitle"></h3>

            <input name="UserName" type="text" placeholder="Username">
            <input name="Password" type="Password" placeholder="Password">
            <input type="button" name="next" class="next action-button" value="New User" />

            <input type="submit" name="next" class="nexts action-login" value="Log in" />
        </fieldset>

    </div>
}

<script type="text/javascript">
    $(function () {
        $("#drag").draggable();
    });
</script>

    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
        @Scripts.Render("~/bundles/jqueryui")
    }

https://onedrive.live.com/redir?resid=D9BCBB2A676D6E13!5568&authkey=!AOCTi6Ss3joIqzA&v=3&ithint=photo%2cJPG

2 个答案:

答案 0 :(得分:1)

这将禁止#drag离开身体:

$("#drag").draggable({containment:'body'});

答案 1 :(得分:0)

您必须使用containment来约束draggable:

$("#drag").draggable({ containment: "parent" });

更多详情:

<强> http://api.jqueryui.com/draggable/#option-containment

或者,如果你想让那个可以拖拽的人不在身体外面,那么:

 $("#drag").draggable({ containment: "body" });