draggable插件拖动过程:当按下鼠标准备拖动时,触发start事件,拖动过程中触发drag事件,拖动完成时(松开鼠标)触发stop事件
<!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(){
var count=[0,0,0];
$("#draggable").draggable({
start:function(){
count[0]++;
$("#draggable2 p").text("start:"+count[0]);
},
drag:function(){
count[1]++;
$("#draggable3 p").text("drag:"+count[1]);
},
stop:function(){
count[2]++;
$("#draggable4 p").text("stop:"+count[2]);
}
})
});
</script>
</head>
<body>
<div id="parent">
parent控件
<div id="draggable" class="ui-widget-content draggable">
click me to drag
</div>
<div id="draggable2" class="ui-widget-content draggable">
<p></p>
</div>
<div id="draggable3" class="ui-widget-content draggable">
<p></p>
</div>
<div id="draggable4" class="ui-widget-content draggable">
<p></p>
</div>
</div>
</body>
</html>