转行学开发，代码100天——2018-03-28

按照所下载教学视频，今天已进行到jQuery UI的学习中。注：本人所用教学视频不是太完整，介绍的内容相对简单，有些只是带过。其他时间中，仍需继续针对各知识模块进行补充学习。

今天记录一下jQuery UI的引用和使用初体验

在开发之前，到jQuery UI官网下载库文件。https://jqueryui.com/

库文件引用：

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

<link rel="stylesheet" type="text/css" href="jquery-ui.min.css">

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

<!DOCTYPE html>

<html>

<head>

    <title>jQuery UI 01——draggable</title>

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

    <link rel="stylesheet" type="text/css" href="jquery-ui.min.css">

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

    <script type="text/javascript" src="draggable.js"></script>

</head>

<body>

 <div id ="div1" style="width: 100px ;height: 100px;border: 1px solid red;">

    DIV1

 </div>

 <div id="div2" style="width: 200px;height: 300px; border:1px solid yellow;">DIV2</div>

</body>

</html>

本例中，创建两个DIV盒子，一个实现拖动效果，一个实现允许拖入效果

其中，自定义js文件draggable.js文件中

$(document).ready(function()

{

    $("#div1").draggable();

    $("#div2").droppable();

    $("#div2").on("drop",function(event,ui)

        {

            $("#div2").text("drop ok!")

        });

});

DIV1实现被拖动，DIV2允许被拖入，即将div1拖进div2中时，实现DIV2文本的修改。

初始状态：

拖动完成：

疑问：在拖动中，如果只是div1盒子少量进入div2中时，并不会修改div2中的 文本，当大部分拖进div2中时，才会修改div2中的文本。

这种现象源于这个方法的何种内部逻辑？

day12—jQuery ui引入及初体验的更多相关文章

  1. Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整

    Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...

  2. javascript/jquery模板引擎——Handlebars初体验

    Handlebars.js下载地址:http://handlebarsjs.com/ 最近自己在建一个站,采用完全的前后端分离的方式,现在正在做前端的部分.其中有项功能是需要ajax调用后端接口,返回 ...

  3. Jenkins下构建UI自动化之初体验

    一.缘 起 笔者之前一直在Windows环境下编写UI自动化测试脚本,近日在看<京东系统质量保障技术实战>一书中,萌生出在jenkins下构建UI自动化测试的想法 二.思 路 首先,在Li ...

  4. 使用 jQuery UI 和 jQuery 插件构建更好的 Web 应用程序

    简介: 对于那些使用 JavaScript 和 jQuery 库从桌面应用程序转向 Web 应用程序的开发人员来说,他们还不习惯去考虑应用程序基本的外观,因为这些以前都是由操作系统来处理的.了解 jQ ...

  5. jquery ui 与 easy ui同时引入 展示效果冲突的问题

    jquery ui 由于在定位控件的时候跟easy UI 控件名相同,同时引入会导致冲突 如果需要两个都存在,可以去jquery ui下载定制版ui 脚本文件

  6. 【Knockout.js 学习体验之旅】（1）ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  7. Struts2 JQuery UI常用插件

    一.什么是插件 ①是遵循一定接口规范编写的程序 ②是原有系统平台功能的扩展和补充 ③只能运行在规定的系统平台下,而不能单独运行 注:由于jQuery插件是基于jQuery脚本库的扩展,所以所有jQue ...

  8. python--爬虫入门（七）urllib库初体验以及中文编码问题的探讨

    python系列均基于python3.4环境 ---------@_@? --------------------------------------------------------------- ...

  9. jQuery UI常用插件使用

    一.什么是插件 ①是遵循一定接口规范编写的程序 ②是原有系统平台功能的扩展和补充 ③只能运行在规定的系统平台下,而不能单独运行 注:由于jQuery插件是基于jQuery脚本库的扩展,所以所有jQue ...

随机推荐

  1. oracle--表分区、分区索引

    --|/ range分区 create table sale( product_id varchar2(5), sale_count number(10,2) ) partition by range ...

  2. sql下的xml配置文件中特殊使用的sql语句编写

    1.使用服用的sql语句------------查询学生表所有字段 <sql id="selectAllStuAll"> select stu.id,stu.name, ...

  3. String.indexOf()的使用方法

    String.indexOf()的用途: 返回此字符串中第一个出现的指定的子字符串,如果没有找到则返回-1 源码如下: /** * Returns the index within this stri ...

  4. 小白学Python（18）——pyecharts 关系图 Graph

    Graph-基本示例 import json import os from pyecharts import options as opts from pyecharts.charts import ...

  5. Gorgeous Sequence（线段树）

    Gorgeous Sequence Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Othe ...

  6. JUC并发包基本使用

    一.简介 传统的Java多线程开发中,wait.notify.synchronized等如果不注意使用的话,很容易引起死锁.脏读问题.Java1.5 版本开始增加 java.util.concurre ...

  7. Pandas 时间序列处理

    目录 Pandas 时间序列处理 1 Python 的日期和时间处理 1.1 常用模块 1.2 字符串和 datetime 转换 2 Pandas 的时间处理及操作 2.1 创建与基础操作 2.2 时 ...

  8. sql server 中 like 中文不匹配问题

    原文:https://blog.csdn.net/miao0967020148/article/details/71108056 MS-SQL Server select * from Book wh ...

  9. Vue-cli2项目文件目录解析

    前言 不是原创,真的不是原创,主要我是根据CSDN的一篇文章和其他平台上的文章整理而来,在最后我会贴上所有原文的地址,下面正式进入正文. Vue-cli项目文件目录结构 这个是Vue-cli2.0版本 ...

  10. SIGINT、SIGQUIT、 SIGTERM、SIGSTOP区别

    2) SIGINT程序终止(interrupt)信号, 在用户键入INTR字符(通常是Ctrl-C)时发出,用于通知前台进程组终止进程. 3) SIGQUIT和SIGINT类似, 但由QUIT字符(通 ...