程序博客网 > 淘宝网店代理靠谱么

AJAX draggable实现的拖曳效果

来源：互联网发布：淘宝网店代理靠谱么编辑：程序博客网时间：2024/04/30 00:58

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    img{width:100px;height:100px;}
    #mydiv{width:500px;height:300px;border:solid 1px red;}
    #mydiv2{width:300px;height:300px;border:solid 1px red;}
    </style>
    <script src="js/Jquery1.7.js" type="text/javascript"></script>
    <script src="js/jquery.ui.core.js" type="text/javascript"></script>
    <script src="js/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="js/jquery.ui.mouse.js" type="text/javascript"></script>
    <script src="js/jquery.ui.draggable.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            $('img').draggable({
                //axis:'y'//规定只能沿y轴拖动
               //containment: '#mydiv2'//规定拖定的区域
                //containment: 'parent'//父容器的别一种写法
                //containment:'#div2'//规定的拖动区域可以不是元素的父容器
               //grid:[10,10]
               opacity:0.3,//设置拖动时的透明度
               //revert:true,
               start:function(){
                      $('#mydiv2').text('开始移动了');
               },
               stop:function(){
                    $('#mydiv2').text('停了');
               },
               drag:function(){
                   // $('#mydiv2').text('一直在努力');

$('#mydiv2').text($('img').offset().left + "," + $('img').offset().top);
}

           });
            //设置一个元素的距离浏览器左边缘和上边缘的距离(横坐标和纵坐标)
            $('#Button1').click(function () {
                $('img').offset({
                    left: 200,
                    top: 200
                });
            })

        })
    </script>
</head>
<body>
<div id="mydiv"> <img src="images/35x35/12.jpg"/></div>
<div id="#mydiv2"> <input id="Button1" type="button" value="button" />
</div>
</body>
</html>

淘宝网店代理靠谱么

淘宝网店代理靠谱么

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子天津大学张连营张述传张痘痘张逗逗图片陈逗逗王逗逗王豆豆爱逗逗儿王豆豆爱逗逗陈逗逗个人资料简介绝世陈逗逗逗逗鸟谭逗逗绝世的陈逗逗王逗逗照片陈逗逗图片陈逗逗照片背上长逗逗张逗逗个人资料下巴长大痘张逸凡张逸凡会玩悠悠球吗张逸杰张逸杰图片张逸杰的女朋友张逸杰女朋友张逸杰高考成绩张逸杰照片张逸杰的女朋友是张雪迎张道宇张裕干白张道真张道真英语语法张道真英语语法大全张道真实用英语语法pdf 张道真高中英语语法英语语法书推荐英语语法书哪本好张道藩张道藩为何不娶蒋碧薇庐江人事人才网张道陵