zoukankan      html  css  js  c++  java
  • jQuery插件(拖拽)

    拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下:

    $(selector). draggable({options})

    options参数为方法调用时的配置对象,根据该对象可以设置各种拖曳效果,如“containment”属性指定拖曳区域,“axis”属性设置拖曳时的坐标方向。

    <!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>
            <link href="style.css" rel="stylesheet" type="text/css" />
            <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
            <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
        </head>
        
        <body>
            <div id="divtest">
                <div id="x" class="drag">沿x轴拖拽</div>
                <div id="y" class="drag">沿y轴拖拽</div>
            </div>
            
            <script type="text/javascript">
                $(function () {
                    $("#x").draggable({containment:"parent",axis: "x"})
                    $("#y").draggable({containment:"parent",axis:"y"})
                });
            </script>
        </body>
    </html>
    努力吧,为了媳妇儿,为了家。。。
  • 相关阅读:
    MySQL数据库 : 高级查询
    ElasticSearch : High Rest Api 使用
    Java : JavaWeb和Tomcat相关
    Linux : Ubuntu 安装 RabbitMQ
    Spring : Spring Security
    Java : logback简单配置
    Spring : JPA的单独使用
    Java : Netty 入门案例
    python__PIP : 安装第三方库
    好文章收藏(持续更新)
  • 原文地址:https://www.cnblogs.com/jlj9520/p/5279453.html
Copyright © 2011-2022 走看看