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

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

纯HTML方式实现拖动组件

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. <script type="text/javascript" src="../easyui/jquery.min.js"></script>
  7. <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
  8. <link type="text/css" rel="stylesheet" href="../easyui/themes/default/easyui.css">
  9. <link type="text/css" rel="stylesheet" href="../easyui/themes/icon.css">
  10. <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
  11. <style type="text/css">
  12.     div {
  13.         background: #E8F2FE;
  14.         border: 2px solid black;
  15.         width: 200px;
  16.         height: 200px;
  17.     }
  18. </style>
  19. </head>
  20. <body>
  21. <div class="easyui-draggable"></div>
  22. </body>
  23. </html>

JS方式实现拖动组件

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. <script type="text/javascript" src="../easyui/jquery.min.js"></script>
  7. <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
  8. <link type="text/css" rel="stylesheet" href="../easyui/themes/default/easyui.css">
  9. <link type="text/css" rel="stylesheet" href="../easyui/themes/icon.css">
  10. <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
  11. <style type="text/css">
  12.     div {
  13.         background: #E8F2FE;
  14.         border: 2px solid black;
  15.         width: 200px;
  16.         height: 200px;
  17.     }
  18. </style>
  19. <script type="text/javascript">
  20.     $(function() {
  21.         $("#d01").draggable({
  22.             onBeforeDrag: function(e) {
  23.                 console.log("在拖动之前触发，返回false将取消拖动");
  24.             }
  25.         });
  26.     });
  27. </script>
  28. </head>
  29. <body>
  30. <div id="d01"></div>
  31. </body>
  32. </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. 国内操作系统OS分析（上）

    国内操作系统OS分析(上) 一．操作系统(OS)概述 操作系统(OS,Operating System),是管理.控制计算机软硬件资源的计算机程序,并为用户提供一个与系统交互的操作界面.OS是配置在计 ...

  2. [NOIP1998 提高组] 拼数

    题目描述 设有 n 个正整数​ a1-an,将它们联接成一排,相邻数字首尾相接,组成一个最大的整数. 输入格式 第一行有一个整数,表示数字个数 n. 第二行有 n 个整数,表示给出的 n 个整数 a_ ...

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

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

  4. Spring Cloud10:Zipkin 服务跟踪

    一.概述 为什么要有服务跟踪,分布式系统中有很多个服务在相互调用,调用关系是错综复杂的,如果这时出现了问题,我们在进行问题排查的时候,或者在优化架构的时候,工作量就比较大,这时候就需要我们能够准确的跟 ...

  5. 在Centos7下安装RabbitMQ

    1.背景 不用多说,这东西好用! 2.安装 步骤一:下载安装包 链接:https://pan.baidu.com/s/1PIYI60wX6L7BtVyVft-vSA 提取码:1234 复制这段内容后打 ...

  6. DOS命令行（11）——更多实用的命令行工具

    start 启动另一个窗口运行指定的程序或命令,所有的DOS命令和命令行程序都可以由start命令来调用.该命令不仅能运行程序,还能运行协议对应的程序 命令格式:START ["title& ...

  7. 环境安装——MySQL安装

    @ 目录 一文教会你安装与卸载MySQL 1. 官网下载 2. 文件下载 3. 卸载步骤 4. 安装步骤 5. MySQL配置 6. 安装出现的问题 6.1 如果出现了最后一步卡死的状态的话,不要慌: ...

  8. Unity不规则按钮点击区域（UGUI）

    文章目录 一. 前言 二. 最终效果 三. 实现 1.创建UICamera 2. UIPolygon节点 3. 编辑碰撞区域 5. 运行测试 6. UIPolygon代码 一. 前言 游戏开发中,可能 ...

  9. Mongo3基础操作

    由于3.X的文档是在3.X当前最新版本前记录,所以这里列出一些常用的操作,比如建立库,删除库,等一些格式,然后在描述开启远程和创建用户的一些区别,以及讲解2.X和3.X配置文件区别. 1. Mongo ...

  10. 【spring源码系列】之【Bean的实例化】

    人生需要探索的热情.坚持的勇气以及热爱生活热爱自己的力量. 1. Bean的实例化 上一篇讲述了bean的生命周期,其中第一步就涉及到了bean的实例化,本文重点分析bean实例化,先进入源码中的Ab ...