EasyUI 一般拖动

最新推荐文章于 2021-07-09 08:47:04 发布

原创最新推荐文章于 2021-07-09 08:47:04 发布 · 232 阅读

0 ·

CC 4.0 BY-SA版权

EasyUI 专栏收录该内容

3 篇文章

订阅专栏

<html>
<head>
<title>draggable</title>
<script type="text/javascript" src="H:/jQuery EasyUI/jquery-easyui-1.5.3/jquery.min.js"></script>
<script type="text/javascript" src="H:/jQuery EasyUI/jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
<script>
$(function (){
$('#d').draggable({
/*revert boolean：如果设置为true，当拖动停止时元素将回到初始位置*/
revert:false
/*
cursor string：
Auto 自动、Crosshair “+”字、Default 默认、Hand 手型、Move 四向箭头、Text “I”行、Wait 等待、Help 帮助
*/
,cursor:'Help'
/*disabled boolean：如果设置为ture时停止拖动*/
,disabled:false
/*axis string：v 只能在垂直方向拖动、h 只能在水平方向拖动、不设置该属性时可在垂直水平方向自由拖动*/
,axis:'v'
/*
onBeforeDrag e：拖动之前触发
onStartDrag e：当目标对象开始被拖动时触发。
onDrag e：在拖动过程中触发，当不能再拖动时返回false
onStopDrag e：当拖动停止时触发
*/
,onBeforeDrag:function(){
$('#title1').css('background','black').css('color','white');
$('#title2').css('background','red').css('color','white');
}
,onStopDrag:function(){
$('#title2').css('background','black').css('color','white');
$('#title1').css('background','red').css('color','white');
}
})
/*
options none：获取属性对象
enable none：运行拖动
disable none：静止拖动
*/
var propertiesJSON = $('#d').draggable('options');
var properties = "";
for(var item in propertiesJSON) {
properties = properties +item+"属性的值："+propertiesJSON[item] + ";\n";
}
alert(properties);
})
</script>
</head>
<body>
<div id="d" style="width:500px;height:500px;">
<div id="title1" style="background:black;color:white">一般拖动</div>
<div id="title2" style="background:red;color:white">一般拖动</div>
</div>
</body>
</html>