<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script src="../jquery-2.2.4.min.js"></script>

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

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

		<style>

			.ui-selected {

				background: #004099;

			}

		</style>

		<script>

			//允许拖动

			$(function() {

				//可拖动

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

				//可拖入

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

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

					alert();

				});

				$('#div3').resizable();

				//列表选择

				$('#select').selectable();

				$('#btn').button();

				$('#btn').on('click', function() {

					if ($('#right').hasClass('ui-selected')) {

						alert('回答正确');

					}

				})

				//列表拖动排序

				$('.sort').sortable();

			})

		</script>

	</head>

	<div id='div1' style="width: 100px ; height: 100px ; border: 1px solid black;">draggable</div>

	<div id='div2' style="width: 200px ; height: 200px ; border: 1px solid red;">droppable</div>

	<div id='div3' style="width: 300px ; height: 300px ; border: 1px solid red;">resizeable</div>

	<!--selecteable-->

	<p>世界上最美丽的人是？</p>

	<ul id="select">

		<li id="right">A.me</li>

		<li>B.我</li>

		<li>C.I</li>

	</ul>

	<a href="#" id="btn">提交</a>

	<!--<button class="sort">1</button>

	<button class="sort">2</button>

	<button class="sort">3</button>

	<button class="sort">4</button>-->

	<ul class="sort">

		<li>1</li>

		<li>2</li>

		<li>3</li>

		<li>4</li>

	</ul>

	<body>

	</body>

</html>

　　一共4项：允许拖动，拖入，列表选择，列表cell拖动排序

jQueryUI之交互的更多相关文章

  1. 解决JqueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug

    前些日子不是在做 使用Jquery-UI实现一次拖拽多个选中的元素操作嘛,在持续完善这个组件时遇到了一个关于拖放排序的bug.今天就着图片和代码重现一下,也顺便告诉大家如何解决这个问题. 首先先上图描 ...

  2. jQuery高级编程

    jquery高级编程1.jquery入门2.Javascript基础3.jQuery核心技术 3.1 jQuery脚本的结构 3.2 非侵扰事JavaScript 3.3 jQuery框架的结构 3. ...

  3. Ajax与JqueryUI和EasyUI错题总结

    Ajax与JqueryUI和EasyUI错题总结 正确答案A,解析:此题考察的是JQuery UI下的menu插件的使用,menu提供ui-state-disabled class 方法禁用任何菜单项 ...

  4. 从零开始学习jQuery (十) jQueryUI常用功能实战

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是实战篇. 使用jQueryUI完成制作网站 ...

  5. EF+jQueryUI前后端分离设计

    开源项目练习EF+jQueryUI前后端分离设计   最近大家流行把项目开源,我也来玩玩.只是开源公司项目不好,小弟只好从公司项目经验上另外弄出一套练习开源给大家. 这个项目可以做简单的团队任务系统( ...

  6. jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题

    jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互.特效.小部件及主题.无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器,jQuery ...

  7. jQueryUI使用指南

    jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同.所有的 jQuery UI 小部件(Widget)使用相同的模式,所以,只要您学会使 ...

  8. 开源项目练习EF+jQueryUI前后端分离设计

    最近大家流行把项目开源,我也来玩玩.只是开源公司项目不好,小弟只好从公司项目经验上另外弄出一套练习开源给大家. 这个项目可以做简单的团队任务系统(做一些简单的任务分配,没经过严格测试.功能单一别喷啊, ...

  9. jQueryUI常用功能实战

    本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...

随机推荐

  1. 使用 greenDao 框架 操作数据库

    0.效果图

  2. yii2框架原生的结合框架使用的图片上传

    首先我们要从model层开始写起,主要是为了创建验证规则,还有图片上传的路径以及图片的命名规则(UploadForm.php) 接下来我们要在控制器层写好业务逻辑,就是什么情况下直接在调用model层 ...

  3. CI框架多个表前缀，如何使用框架语句querybuilder

    最近用CI框架遇到一个问题.2个前提条件: 1.数据库设计不规范,有的有表前缀(如:ck_table1),有的没有(如:table2)或者表前缀不一样: 2.数据库操作又想使用数据库操作语句query ...

  4. SOAP和WSDL的一些必要知识

    SOAP和WSDL对Web Service.WCF进行深入了解的基础,因此花一些时间去了解一下是很有必要的. 一.SOAP(Simple Object Access Protocol) 如果我们要调用 ...

  5. HTML 事件属性

    HTML 事件属性一:定义二:窗口事件 (Window Events)三:表单元素事件 (Form Element Events)四:图像事件 (Image Events) 一:定义 HTML 4 的 ...

  6. Linux常用调优配置

    cenos 6.5 文件句柄和网络端口 修改系统所有进程可用句柄数,vi /etc/sysctl.conf fs.file-max=655360net.ipv4.ip_local_port_range ...

  7. 8-JS闭包、回调实例

    1.回调 javascipt中,函数回调一般用于以下几种场景: 1.异步执行(例如读取文件,进行HTTP请求) 2.同步(阻塞) 3.事件监听和处理 4.设置超时和时间间隔的方法 异步例子(使用AJA ...

  8. Struts2之Action

    Struts2之Action MVC模式中需要有一个控制器来负责浏览器与服务器之间的通信,实现用户与服务器的交互.在Struts2框架中实现这一功能的是Action,它是整个框架最核心的部分.Acti ...

  9. spring+mybatis

    ---恢复内容开始--- 使用SSM(Spring.SpringMVC和Mybatis)已经有三个多月了,项目在技术上已经没有什么难点了,基于现有的技术就可以实现想要的功能,当然肯定有很多可以改进的地 ...

  10. 类库、委托、is as运算符、泛型集合

    类库: 说白了,就是让别人调用你写的方法,并且不让别人看到你是怎么实现的. 如果有功能你不会做,需要别人帮忙,那么你的同事可以帮你写好一个类,然后你来调用这个类中的方法,完成你的项目. 1.C#源代码 ...