jq UI

最新推荐文章于 2023-04-10 08:53:48 发布

xiaoxioxia

最新推荐文章于 2023-04-10 08:53:48 发布

阅读量873

点赞数

分类专栏： jquery UI 文章标签： jquery UI

jquery UI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<script type="text/javascript">
$(document).ready(function(){
$(".block").draggable({
//helper: "clone", //拖动时克隆,默认是 original
//axis:"x", //定义拖动方向
containment:"#contain", //定义一个容器,div就只能在容器的范围内活动了
cursor: "move", //定义拖动时鼠标指针的状态，参数类型详见css中cursor配置
cursorAt:{top:10}, //定义拖动的时候鼠标指针的位置,此位置是相对被拖动对象的边框，单位px
opacity: 0.40, //设置对象被拖动时的透明度
handle: "div", //设置拖动控制器，也就是说当鼠标按住控制器的时候，才能拖动对象
scroll:false, //设置当拖动超出整个浏览器窗口,是否滚动浏览器
distance: 20, //设置当鼠标拖动多少像素时对象才会移动
//delay: 1000, //设置延迟时间单位毫秒
grid:[50,50], //设置每次拖动的步进单位px
dragPrevention:['input', 'textarea', 'button', 'select', 'option'],//设置被拖动的div碰到那些dom元素时停止
start:function(e,ui){}, //开始拖动执行的函数
drag:function(e,ui){}, //拖动时执行的函数
stop:function(e,ui){} //拖动停止执行的函数
}).resizable();
$("#contain").draggable({
revert: true, //设置对象被拖动释放后时候回到原始位置
helper: "clone"
});
});
</script><title>jQuery UI -- Draggable</title>
</head>
<body>
<div id="contain">
<div class="block">
<div class="hendle" style="background: green">handle</div>
</div>
</div>
----------------------------------------------------------------
drag:function(e,ui){
if(...)ui.position.left=0;
if(...)ui.position.top=0;//实现元素可拖动的区域
}
----------------------------------------------------------------
$('#dialog').draggable({handle:$('#title')});//title位于dialog内部，当拖title后dialog才会动!!!

xiaoxioxia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq UI

scripttype="text/javascript"> $(document).ready(function(){ $(".block").draggable({ //helper: "clone", //拖动时克隆,默认是 original //axis:"x", //定义拖动方向 containment:"#contain", //定义一个容器,div就只能在容器的范围内活
复制链接

扫一扫