draggable的用法_draggable

全栈程序员站长

发布于 2022-09-20 20:52:24

1.4K0

大家好，又见面了，我是你们的朋友全栈君。

一、概述

通过前面几节学习，大家应该都知道了，一个div对象是可以通过拖拉来改变大小，也可以通过拖动来改变其位置的。如何改变大小已经讲解过了，那么怎么实现拖动改变位置呢？现在就开始讲解如何实现拖动 — Draggable。

二、实现三步曲

1、添加css样式文件和js源文件

1: < link rel=”stylesheet” href=”js/themes/flora/flora .all .css”

   2:     type="text/css" media="screen" title="Flora (Default)" />

   3: <style>

   4: .block {

   5:     border: 2px solid #0090DF;

   6:     background-color: #68BFEF;

   7:     width: 150px;

   8:     height: 70px;

   9:     margin: 10px;

  10: }

  11: #contain {

  12:     border: 2px solid #0090DF;

  13:     background-color: red;

  14:     width: 500px;

  15:     height: 140px;

  16:     margin: 10px;

  17: }

  18: </style>

  19: <script type="text/javascript" src="js/jquery.js"></script>

  20: <script type="text/javascript" src="js/ui/ui.core.js"></script>

  21: <script type="text/javascript" src="js/ui/ui.resizable.js"></script>

  22: <script type="text/javascript" src="js/ui/ui.draggable.js"></script>

2、定义一个<div></div> 1: < div id=”contain” > </ div > 3、编写js代码，调用draggable() 1: $( “#contain”).draggable(); 三、详解 1: <script type= “text/javascript”>

   2: $(document).ready(function(){

   3:     $(".block").draggable({

   4:         //helper: "clone",         //拖动时克隆,默认是 original

   5:         //axis:"x",                //定义拖动方向

   6:         containment:"#contain",    //定义一个容器,div就只能在容器的范围内活动了

   7:         cursor: "move",            //定义拖动时鼠标指针的状态 ，参数类型详见css中cursor配置

   8:         cursorAt:{top:10},         //定义拖动的时候鼠标指针的位置,此位置是相对被拖动对象的边框，单位px

   9:         opacity: 0.40,             //设置对象被拖动时的透明度

  10:         handle: "div",             //设置拖动控制器，也就是说当鼠标按住控制器的时候，才能拖动对象

  11:         scroll:false,              //设置当拖动超出整个浏览器窗口,是否滚动浏览器

  12:         distance: 20,              //设置当鼠标拖动多少像素时对象才会移动

  13:         //delay: 1000,             //设置延迟时间 单位毫秒

  14:         grid:[50,50],              //设置每次拖动的步进 单位px

  15:         dragPrevention:['input', 'textarea', 'button', 'select', 'option'],//设置被拖动的div碰到那些dom元素时停止

  16:         start:function(e,ui){},    //开始拖动执行的函数

  17:         drag:function(e,ui){},     //拖动时执行的函数

  18:         stop:function(e,ui){}      //拖动停止执行的函数

  19:     }).resizable();

20:

  21:     $("#contain").draggable({

  22:             revert: true,          //设置对象被拖动释放后时候回到原始位置

  23:             helper: "clone"

  24:     });

  25: });

  26:  </script>

27:

  28: <title>jQuery UI -- Draggable</title>

  29: </head>

  30: <body>

  31: <div id="contain">

  32: <div class="block">

  33: <div class="hendle" style="background: green">handle</div>

  34: </div>

  35: </div>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/166414.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度