本文介绍了一个简单的Draggable组件使用案例，展示了如何初始化该组件并设置关键属性如限制拖动轴向、限定拖动范围等。此外，还演示了如何启用和禁用组件，以及触发开始拖动时的事件。
Drable的简单使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI ExamplePage</title>
<scriptsrc="js/jquery-1.10.2.js"></script>
<scriptsrc="js/jquery-ui-1.10.4.custom.js"></script>
<link rel="stylesheet"href="css/ui-lightness/jquery-ui-1.10.4.custom.min.css">
<style type="text/css">
#parent{
border:1px solid #ddd;
width:250px;
height:250px;
background:gray;
}
#child{
border:1px solid gray;
width:70px;
height:70px;
background:green;
}
</style>
<script>
//查看api其中设置属性在对应的交互函数中用{添加属性和属性值}
//如果添加方法直接用名字调用
//如果是添加事件则添加到{里面}
$(function() {
$( "#child" ).draggable({
addClasses: false,
axis: "x",
containment: "parent",
cursor: "crosshair",
start: function( event,helper ) {alert("start");}
});
$( "#child" ).draggable();
$( "#child" ).draggable( "disable" );
$( "#child" ).draggable( "enable");
});
</script>
</head>
<body>
<h1>drapable的使用</h1>
<div id="parent">
parent
<div id="child">chile</div>
</div>
</body>
</html>
扫一扫
3158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
