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. GraphX编程指南

    GraphX编程指南 概述 入门 属性图 属性图示例 图算子 算子摘要列表 属性算子 结构化算子 Join算子 最近邻聚集 汇总消息(a​​ggregateMessages) Map Reduce三元 ...

  2. 算法训练 区间k大数查询（题解）

    资源限制 时间限制:1.0s   内存限制:256.0MB   问题描述 给定一个序列,每次询问序列中第l个数到第r个数中第K大的数是哪个.   输入格式 第一行包含一个数n,表示序列长度. 第二行包 ...

  3. 像Swing这种已经不太用的技术，大学还在教，到底要不要学？

    一直以来,写日常问题.前沿技术和架构思考类的文章比较多,今天为什么突然来说说Swing这个陈年老技术呢? 因为在CSDN上看到了这样的一篇文章: 可以看到作者对于学Swing还是挺愤怒的,不过确实Sw ...

  4. 简单理解数据库连接池（JDBC）

    为什么要使用连接池? 在我们写代码的时候,写了很多类,假如这些类都和数据库打交道.这样的话每个类都要去获取数据库连接,操作完了之后就把连接释放了. 要知道,获取数据库连接的操作其实是向操作系统底层去获 ...

  5. fiddler操作详情

    1.设置fiddler请求过滤 2.请求与响应的格式内容  3.拦截请求操作 a.按F11开始拦截,发送请求 b.修改请求数据 c.SHIFT+F11关闭拦截 d.run to complete,把修 ...

  6. Spring Bean 的生命周期总结

    除了使用阶段外,Spring 将 bean 的生命周期定义为实例化.属性填充.初始化和销毁四个阶段,并为每个阶段提供了多个拓展点用于自定义 bean 的创建过程.这篇文章介绍了 bean 的生命周期和 ...

  7. java学习笔记1（入门级）

    Java包括三大块    JavaSE (Java标准版)    JavaEE(Java企业版)  JavaME(Java微型版) Java语言特性           简单性:例如C++支持多继承, ...

  8. 【Azure 机器人】微软Azure Bot 编辑器系列(6) : 添加LUIS，理解自然语言 (The Bot Framework Composer tutorials)

    欢迎来到微软机器人编辑器使用教程,从这里开始,创建一个简单的机器人. 在该系列文章中,每一篇都将通过添加更多的功能来构建机器人.当完成教程中的全部内容后,你将成功的创建一个天气机器人(Weather ...

  9. vs联合halcon——采集图像（实时采集与单次采集）

    摘要 在对vs进行环境配置好以后,就可以开始与halcon联合进行实战.本篇就对图像的采集进行总结.通过构建采集相机GrabImage类的三个方法实现图像的采集: open() 打开相机 grabim ...

  10. kubernetes之副本控制器(RC/RS)

    1.了解ReplicationController ReplicationController是一种kubernetes资源,可确保它的pod始终保持运行状态. 如果pod因任何原因消失(例如节点从集 ...