easyui-draggable的拖动组件还是比较好用的，它能够快速地实现网页中元素的拖动效果

实现easyui-draggable拖动组件有两种方式：纯HTML方式和JS方式

纯HTML方式实现拖动组件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="../easyui/jquery.min.js"></script>

<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>

<link type="text/css" rel="stylesheet" href="../easyui/themes/default/easyui.css">

<link type="text/css" rel="stylesheet" href="../easyui/themes/icon.css">

<script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>

<style type="text/css">

    div {

        background: #E8F2FE;

        border: 2px solid black;

        width: 200px;

        height: 200px;

    }

</style>

</head>

<body>

<div class="easyui-draggable"></div>

</body>

</html>

JS方式实现拖动组件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="../easyui/jquery.min.js"></script>

<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>

<link type="text/css" rel="stylesheet" href="../easyui/themes/default/easyui.css">

<link type="text/css" rel="stylesheet" href="../easyui/themes/icon.css">

<script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>

<style type="text/css">

    div {

        background: #E8F2FE;

        border: 2px solid black;

        width: 200px;

        height: 200px;

    }

</style>

<script type="text/javascript">

    $(function() {

        $("#d01").draggable({

            onBeforeDrag: function(e) {

                console.log("在拖动之前触发，返回false将取消拖动");

            }

        });

    });

</script>

</head>

<body>

<div id="d01"></div>

</body>

</html>

[刘阳Java]_easyui-draggable拖动组件_第4讲的更多相关文章

  1. [刘阳Java]_Spring常用注解介绍_第6讲

    Spring的注解是在Spring2.5的版本中引入的,目的简化XML配置.在企业开发过程中使用注解的频率非常高,但是学习注解的前提是大家一定要对Spring基于XML配置要熟悉,这是我个人建议,因为 ...

  2. [刘阳Java]_SpringMVC访问静态资源_第9讲

    有些时候我们在使用SpringMVC的时候造成无法访问静态资源文件(如:html,js,css,image等等).其主要的原因出在web.xml文件我们设置SpringMVC前端控制器的映射路径 &l ...

  3. [刘阳Java]_BeanNameViewResolver视图解析器_第8讲

    BeanNameViewResolver:这个视图解析器跟XmlViewResolver有点类似,也是通过把返回的逻辑视图名称去匹配定义好的视图bean对象.它要求视图bean对象都定义在Spring ...

  4. [刘阳Java]_ResourceBundleViewResolver视图解析器_第7讲

    ResourceBundleViewResolver是根据proterties文件来找对应的视图来解析"逻辑视图".该properties文件默认是放在classpath路径下的v ...

  5. [刘阳Java]_Spring相关配置介绍_第5讲

    这一节我们介绍一下Spring框架的相关常用配置 Spring依赖注入的两种方式(构造方法注入和setter方式注入) p-namespace方式配置 properties属性文件配置方式 集合对象配 ...

  6. [刘阳Java]_MyBatis_注解基本用法_第10讲

    MyBatis注解提出,可以说是非常好简化了MyBatis配置文件的使用.下面我们简单地来告诉大家如何使用MyBatis的注解 定义接口 package com.gxa.dao; import jav ...

  7. [刘阳Java]_MyBatis_实体关系映射_第8讲

    MyBatis既然是一个ORM框架,则它也有像Hibernate那样的一对多,多对多,多对一的实体关系映射功能.下面我们就来介绍一下如何使用MyBatis的实体关系映射 1.MyBatis实体关系映射 ...

  8. [刘阳Java]_InternalResourceViewResolver视图解析器_第6讲

    SpringMVC在处理器方法中通常返回的是逻辑视图,如何定位到真正的页面,就需要通过视图解析器 InternalResourceViewResolver是SpringMVC中比较常用视图解析器. 网 ...

  9. [刘阳Java]_EasyUI环境搭建_第2讲

    在EasyUI的第1讲中我们介绍了学习EasyUI能够做什么,这次我们得快速搭建一个EasyUI环境,来测试一下它的运行效果 1.jQuery EasyUI环境搭建 <script type=& ...

随机推荐

  1. 用TVM在硬件平台上部署深度学习工作负载的端到端 IR 堆栈

    用TVM在硬件平台上部署深度学习工作负载的端到端 IR 堆栈 深度学习已变得无处不在,不可或缺.这场革命的一部分是由可扩展的深度学习系统推动的,如滕索弗洛.MXNet.咖啡和皮托奇.大多数现有系统针对 ...

  2. CUDA C++编程接口：编译

    CUDA C++编程接口:编译 一．概述 CUDA C++为熟悉C++编程语言的用户提供了一个简单的路径,以方便地编写程序以执行该设备. 它由一组最小的扩展到C++语言和运行库. 在编程模型中引入了核 ...

  3. 什么是视觉Visual SLAM

    什么是视觉Visual SLAM What Is Visual SLAM? What are the origins of visual SLAM? and what are some other a ...

  4. 【NX二次开发】Block UI 对象颜色选择器

    属性说明 常规         类型 描述     BlockID     String 控件ID     Enable     Logical 是否可操作     Group     Logical ...

  5. 把axios获取到的数据渲染到列表上，使用better-scroll实现列表左右滑动

    问题:axios数据请求完后,页面是有数据的,即页面看到有数据,但是better-scroll却无法滚动 原因:这是因为在数据更新前,better-scroll已经渲染完成了 解决方法:这是个异步问题 ...

  6. xshell远程连接另一台电脑的数据库,启动图形失败

    1.用xshell远程连接数据库10.62.207.152,且用oracle用户直接登陆 2.执行:netca 报错: Oracle Null Service Configuration: Error ...

  7. DOS命令行（9）——wmic-系统管理命令行工具

    wmic 介绍与语法 WMI(Windows Management Instrumentation,Windows 管理规范)是一项核心的 Windows 管理技术:用户可以使用 WMI 管理本地和远 ...

  8. DNS 解析过程

    DNS 是应用层协议,用于将域名转换成 IP 地址. 1. 解析过程 DNS 的核心系统是一个三层的树状.分布式服务,基本对应域名的结构. 根域名服务器:管理顶级域名服务器,返回 com.net.cn ...

  9. 【Spring Cloud & Alibaba 实战 | 总结篇】Spring Cloud Gateway + Spring Security OAuth2 + JWT 实现微服务统一认证授权和鉴权

    一. 前言 hi,大家好~ 好久没更文了,期间主要致力于项目的功能升级和问题修复中,经过一年时间的打磨,[有来]终于迎来v2.0版本,相较于v1.x版本主要完善了OAuth2认证授权.鉴权的逻辑,结合 ...

  10. Kubernetes通过downwardAPI传递元数据

    应用往往需要获取所运行环境的一些信息,包括应用自身以及集群中其他组件的信息.Kubernetes可以通过环境变量以及DNS进行服务发现,但其他信息如何处理呢?下面将介绍特定pod和容器元数据如何被传递 ...