<!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. 机器学习实战-K-nearest neighbors 算法的优缺点

    K临近算法是基于实例的学习,使用算法的时候我们必须要有接近分类结果的实例训练样本数据. 优点:精度高,对异常值不敏感 缺点: 时间复杂度和空间复杂度比较大.(如果训练样本数据集比较大,需要大量的空间来 ...

  2. 前端开发面试题JS2

    21.如何判断一个对象是否属于某个类? 使用instanceof if(a instanceof Person){ alert('yes'); } 22.new操作符具体干了什么呢? (1)创建一个空 ...

  3. 二、快速起步（Mysql镜像）

    1.登录镜像站点 docker login daocloud.io 用户名 密码 邮箱 1.1 拉取镜像 docker pull [option] name:[tag] 例如 docker pull ...

  4. plsql和oracle错误记录

    昨天oracle密码搞忘记了,根据网上方法弄了不管用,索性直接删掉数据库,然后重建,再次登陆的时候既然报错, 说我适配器错误,我靠,这是闹哪样,找了好多方法,都解决不了. 然后上班问一个oracle大 ...

  5. zigbee学习之路(六):Time3(查询方式)

    一.前言 通过上次的学习,相信大家对cc2530单片机的定时器的使用有了一定的了解,今天我们来介绍定时器3的使用,为什么介绍定时器3呢,因为它和定时器4功能是差不多的,所以学会定时器3,就基本掌握了c ...

  6. JavaEE程序员必读图书大推荐

    下面是我根据多年的阅读和实践经验,给您推荐的一些图书: 第一部分: Java语言篇 1 <Java编程规范> 星级: 适合对象:初级,中级 介绍:作者James Gosling(Java之 ...

  7. mysql show status

    在LAMP架构的网站开发过程中,有些时候我们需要了解MySQL的服务器状态信息,譬如当前MySQL启动后的运行时间,当前MySQL的客户端会话连接数,当前MySQL服务器执行的慢查询数,当前MySQL ...

  8. Java开发中经典的小实例-（能被3整除，并且十个数换一行）

    import java.util.Scanner;public class Test15 {    public static void main(String[] args) {        // ...

  9. 配置eclipse集成开发环境_编译_调试

    1. 因为eclipse是基于Java运行,所以在运行Eclipse之前,需要安装Java SE,对于Java SE,需要Java SE6 JRE系列的版本,可以在这个位置下载: Java SE 6只 ...

  10. jquery引用方法时传递参数

    经常到网上去下载大牛们写的js插件.每次只需将js引用并设置下变量就行了,但一直没搞明白原理(主要是大牛们的代码太简练了-,-). 这次弄清了如何传递.设置多个(很多个)参数. 如 方法为functi ...