draggable的用法_draggable

draggable的用法_draggable一、概述通过前面几节学习,大家应该都知道了,一个div对象是可以通过拖拉来改变大小,也可以通过拖动来改变其位置的。如何改变大小已经讲解过了,那么怎么实现拖动改变位置呢?现在就开始讲解如何实现拖动-

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

一、概述

通过前面几节学习,大家应该都知道了,一个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>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/166414.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号