jQuery插件(拖拽)

Posted 纸鸢@tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

以上是关于jQuery插件(拖拽)的主要内容,如果未能解决你的问题,请参考以下文章

jQuery插件之路——文件上传(支持拖拽上传)

div拖拽缩放jquery插件编写——带8个控制点

jQuery插件(拖拽)

jQuery的DOM操作实例——拖拽效果&&拓展插件

可拖拽和带预览图的jQuery文件上传插件ssi-uploader

jquery 或js关于鼠标单击和拖拽的区别