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. 快速导入GitHub上面的公钥

    有时候新装了一台linux机器, 又要找公钥导进去, 或者在自己电脑上执行ssh-copy-id, 有时候手边没有电脑就比较麻烦, 我们可以将GitHub上配置的公钥导入到机器里 首先包装GitHub ...

  2. VTA硬件

    VTA硬件 提供了VTA硬件设计的自上而下的概述.本硬件设计涵盖两个级别的VTA硬件: VTA设计及其ISA硬件-软件接口的体系结构概述. VTA硬件模块的微体系结构概述以及计算核心的微代码规范. V ...

  3. YOLOv4实用训练实践

    YOLOv4实用训练实践 准备工作 推荐使用Ubuntu 18.04 CMake >= 3.8: https://cmake.org/download/ CUDA >= 10.0: htt ...

  4. NVIDIA Turing Architecture架构设计（上）

    NVIDIA Turing Architecture架构设计(上) 在游戏市场持续增长和对更好的 3D 图形的永不满足的需求的推动下, NVIDIA 已经将 GPU 发展成为许多计算密集型应用的世界领 ...

  5. Centos8配置Nginx开机自启动

    第一步:创建service文件,并编辑(可理解为开机时自动启动Nginx的脚本服务文件) vim /lib/systemd/system/nginx.service /lib 与 /usr/lib 里 ...

  6. 5.7w字？GitHub标星120K的Java面试知识点总结，真就物超所值了

    如果你觉得在一些程序员平台获取到的资料太乱学习起来毫无头绪,但是单看<Java编程思想>相似的一类的Java圣经"枯燥无味",那我推荐你看一下这份GitHub获得过12 ...

  7. Java网络编程实践

    网络编程的目的 无线电台......传播交流信息,数据交换.通信 想要达到这个效果需要什么: 1. 如何准确的定位网络上的第一台主机 192.168.16.124:端口,定位到这个计算机上的某个资源. ...

  8. HashMap源码解析和设计解读

    HashMap源码解析 ​ 想要理解HashMap底层数据的存储形式,底层原理,最好的形式就是读它的源码,但是说实话,源码的注释说明全是英文,英文不是非常好的朋友读起来真的非常吃力,我基本上看了差不多 ...

  9. apache jmeter下载与安装

    JMeter是Apache软件基金会的产品,用于对静态的和动态的资源性能进行测试.jmeter可以运行在多个平台上,如Windows和Linux,本文讲的是在Windows安装jmeter. 工具/原 ...

  10. 带你认真了解一下Java分布式系统的基本特性

    一般,分布式系统需要支持以下特性: 资源共享 开放性 并发性 可伸缩性 容错性 透明性 下面分别讨论. 容易理解的 资源共享 一旦授权,可以访问环境中的任何资源 资源:包括硬件(e.g. printe ...