<!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. ROS探索总结（三）——ROS新手教程【转】

    转自:http://blog.csdn.net/hcx25909/article/details/8811313 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[-] 一ROS的 ...

  2. App创业者必看：如何选择免费数据分析平台

      笔者是一位移动互联网老兵,做过好几个App的开发运营工作,其中一些如今侥幸有了上亿用户.今天和大家聊一下App开发中,不能缺少的一个工具——数据分析系统 首先,App创业者为什么需要一个数据分析系 ...

  3. linux atom 不支持中文

    linux atom 不支持中文 1.首先在ubuntu下安装泉驿正黑字体 sudo apt-get install ttf-wqy-* 2.Edit > Preferences > Se ...

  4. Python3基础 isinstance 判断一个变量是否为指定的类型

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  5. sd 卡驱动--基于高通平台

    点击打开链接 内容来自以下博客: http://blog.csdn.net/qianjin0703/article/details/5918041 Linux设备驱动子系统第二弹 - SD卡 (有介绍 ...

  6. java初学知识点

    public class EnumTest { public static void main(String[] args) { Size s=Size.SMALL; Size t=Size.LARG ...

  7. touch穿透

    出现穿透的前提:上层绑定touch事件,下层绑定click事件. 解决方案:touchend绑定: e.preventDefault();$(下层).css("pointer-events& ...

  8. 《BI那点儿事》数据流转换——透视

    这个和T-SQL中的PIVOT和UNPIVOT的作用是一样的.数据透视转换可以将数据规范或使它在报表中更具可读性. 通过透视列值的输入数据,透视转换将规范的数据集转变成规范程度稍低.但更为简洁的版本. ...

  9. iOS - CocoaPods 第三方开源框架管理

    1.CocoaPods CocoaPods 是一个负责管理 iOS 项目中第三方开源库的工具.CocoaPods 的项目源码在 Github 上管理.该项目开始于 2011 年 8 月 12 日,在这 ...

  10. Java 序列化 反序列化 历史版本处理

    直接引用  http://www.cnblogs.com/xdp-gacl/p/3777987.html