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)


相关推荐

  • java中的工作流要怎样实现_java工作流开发要怎么实现?

    java中的工作流要怎样实现_java工作流开发要怎么实现?Java工作流的应用在目前十分广泛,能够熟练的实现工作流也是一种本事,本篇文章就让小编带你了解下其中的实现关键。我们知道,工作流的实现主要依靠反射机制,想要实现它,首先我们先来创建一张工作流表创建一张工作流表如:主键|工作流Code|工作流内容其中工作流内容为Json格式工作流内容{“procCode”:”OPS”,”procName”:”c端补齐(乘客信息补全)”,”taskCo…

  • pycharm中安装包

    pycharm中安装包1、pycharm中万能提示键1、在import中导入包时,下方出现红色波浪线,表明当前python中存在该2、将鼠标停留在红色波浪线上,按Alt+Enter3、选择Installpackagenumpy4、查看已经安装的包,File—>Settings—>ProjectInterpreter2、在ProjectInterpreter中管理包1、包的升级和删除2.包的安装3.安装指定的包和指定的版本…

  • 为啥国人偏爱Mybatis,而老外喜欢Hibernate/JPA呢?

    为啥国人偏爱Mybatis,而老外喜欢Hibernate/JPA呢?关于SQL和ORM的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行了一番讨论,感触还是有一些,于是就有了今天这篇文。声明:本文不会下关于Mybatis和JPA两个持久层框架哪个更好这样的结论。只是摆事实,讲道理,所以,请各位看官勿喷。一、事件起因关于Mybatis和JPA孰优孰劣的问题,争论已经很多年了。一直也没有结论,毕竟每个人的喜好和习惯是大不相同的。我也看…

    2022年10月20日
  • ​DB-Engines 11月数据库排名:PostgreSQL坐稳同期涨幅榜冠军宝座[通俗易懂]

    ​DB-Engines 11月数据库排名:PostgreSQL坐稳同期涨幅榜冠军宝座

  • Linux中ifcfg-eth0配置参数说明

    Linux中ifcfg-eth0配置参数说明

    2021年10月18日
  • 【Cutout】《Improved Regularization of Convolutional Neural Networks with Cutout》[通俗易懂]

    【Cutout】《Improved Regularization of Convolutional Neural Networks with Cutout》[通俗易懂]arXiv-2017随着深度学习技术的发展,CNN在很多计算机视觉任务中崭露头角,但increasedrepresentationalpoweralsocomesincreasedprobabilityofoverfitting,leadingtopoorgeneralization.为提升模型的泛化性能,模拟objectocclusion,作者提出了Cutout数据增强的方法——randomlymaskingoutsquareregionsofinput

发表回复

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

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