限制移动范围的拖放

最新推荐文章于 2023-05-12 11:23:27 发布

colorsunlight_110

最新推荐文章于 2023-05-12 11:23:27 发布

阅读量1.5k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/colorsunlight/article/details/44651801

版权

jQuery 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../public/js/jquery-1.8.3.js"></script>
<script src="../public/js/jquery-ui-1.10.4.custom.js"></script>
<script src="../public/js/jquery-ui.js"></script>
<title>限制移动范围的拖放功能</title>
<style type="text/css">
.draggable{width: 150px;height: 150px;background-color: #990}
#contain{margin-left:20px;margin-bottom:20px; width:200px;height:200px;background-color: blue;}
#parent{margin-left:20px;margin-bottom:20px; width:500px;height:500px;background-color:red;}
</style>
<script type="text/javascript">
$(document).ready(function(){
    $("#draggable").draggable({axis:"y"});//仅可以垂直拖动的盒子
    $("#draggable2").draggable({axis:"x"});//仅可以水平拖动的盒子
    //只能在容器contain内部拖动的盒子
    $("#draggable3").draggable({containment:"#contain",scroll:false});
    //在当前盒子的父控件中可以拖动盒子
    $("#draggable4").draggable({containment:"parent"});
});
</script>
</head>
<body>
<div id="parent">
  parent控件
    <div id="draggable" class="ui-widget-content draggable">
        <p>仅可以垂直拖动的盒子</p>
    </div>
    <div id="draggable2" class="ui-widget-content draggable">
        <p>仅可以水平拖动的盒子</p>
    </div>
    <div id="draggable4" class="ui-widget-content draggable">
        <p>在当前盒子的父控件中可以拖动盒子</p>
    </div>
    <div id="contain">
        contain
        <div id="draggable3" class="ui-widget-content draggable">
            <p>只能在容器contain内部拖动的盒子</p>
        </div>
    </div>
</div>

</body>
</html>

colorsunlight_110

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
限制移动范围的拖放

<!DOCTYPE html><html><head><meta charset="UTF-8"><script src="../public/js/jquery-1.8.3.js"></script><script src="../public/js/jquery-ui-1.10.4.custom.js"></script><script src="../public/js/jquer
复制链接

扫一扫