jQuery使用事件监控拖曳次数

最新推荐文章于 2021-06-10 18:00:06 发布

colorsunlight_110

最新推荐文章于 2021-06-10 18:00:06 发布

阅读量536

点赞数

分类专栏： jQuery

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

版权

jQuery 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

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>

colorsunlight_110

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery使用事件监控拖曳次数

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
复制链接

扫一扫

专栏目录