文档章节

18.EASYUI droppable组件

F
 Favour
发布于 2016/08/16 19:48
字数 904
阅读 12
收藏 0
点赞 0
评论 0

一,基本可拽入容器

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Droppable - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/demo.css">
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>基本可拽入容器</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>把左边项拖拽到右边目标区域.</div>
	</div>
	<div style="margin:10px 0;"></div>
	<div style="float:left;width:200px;margin-right:20px;">
		<div class="title">源</div>
		<div>
			<div class="dragitem">苹果</div>
			<div class="dragitem">桃子</div>
			<div class="dragitem">桔子</div>
		</div>
	</div>
	<div style="float:left;width:200px;">
		<div class="title">目标</div>
		<div class="easyui-droppable targetarea"
				data-options="
					accept: '.dragitem',
					onDragEnter:function(e,source){
						$(this).html('进入');
					},
					onDragLeave: function(e,source){
						$(this).html('离开');
					},
					onDrop: function(e,source){
						$(this).html($(source).html() + ' 拽入');
					}
				">
		</div>
	</div>
	<div style="clear:both"></div>
	<style type="text/css">
		.title{
			margin-bottom:10px;
		}
		.dragitem{
			border:1px solid #ccc;
			width:50px;
			height:50px;
			margin-bottom:10px;
		}
		.targetarea{
			border:1px solid red;
			height:150px;
		}
		.proxy{
			border:1px solid #ccc;
			width:80px;
			background:#fafafa;
		}
	</style>
	<script>
		$(function(){
			$('.dragitem').draggable({
				revert:true,
				deltaX:10,
				deltaY:10,
				proxy:function(source){
					var n = $('<div class="proxy"></div>');
					n.html($(source).html()).appendTo('body');
					return n;
				}
			});
		});
	</script>
</body>
</html>

二,改变拖放物顺序

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Droppable - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/demo.css">
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>

<body>
	<h2>改变托动物顺序</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>拖动托动物改变顺序.</div>
	</div>
	<div style="margin:10px 0;"></div>
	<ul style="margin:0;padding:0;margin-left:10px;">
		<li class="drag-item">托动物 1</li>
		<li class="drag-item">托动物2</li>
		<li class="drag-item">托动物3</li>
		<li class="drag-item">托动物4</li>
		<li class="drag-item">托动物5</li>
		<li class="drag-item">托动物6</li>
	</ul>
	<style type="text/css">
		.drag-item{
			list-style-type:none;
			display:block;
			padding:5px;
			border:1px solid #ccc;
			margin:2px;
			width:300px;
			background:#fafafa;
			color:#444;
		}
		.indicator{
			position:absolute;
			font-size:9px;
			width:10px;
			height:10px;
			display:none;
			color:red;
		}
	</style>
	<script>
		$(function(){
			var indicator = $('<div class="indicator">>></div>').appendTo('body');
			$('.drag-item').draggable({
				revert:true,
				deltaX:0,
				deltaY:0
			}).droppable({
				onDragOver:function(e,source){
					indicator.css({
						display:'block',
						left:$(this).offset().left-10,
						top:$(this).offset().top+$(this).outerHeight()-5
					});
				},
				onDragLeave:function(e,source){
					indicator.hide();
				},
				onDrop:function(e,source){
					$(source).insertAfter(this);
					indicator.hide();
				}
			});
		});
	</script>

</body>
</html>

三,接受一个拖拽物

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Droppable - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/demo.css">
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>

<body>
	<h2>接受一个拖拽物</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>不接受一些拖拽物.</div>
	</div>
	<div style="margin:10px 0;"></div>
	<div id="source" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;">
		来拖我!
		<div id="d1" class="drag">拖拽物1</div>
		<div id="d2" class="drag">拖拽物2</div>
		<div id="d3" class="drag">拖拽物3</div>
	</div>
	<div id="target" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;">
		拖到这里!
	</div>
	<div style="clear:both"></div>
	<style type="text/css">
		.drag{
			width:100px;
			height:50px;
			padding:10px;
			margin:5px;
			border:1px solid #ccc;
			background:#AACCFF;
		}
		.dp{
			opacity:0.5;
			filter:alpha(opacity=50);
		}
		.over{
			background:#FBEC88;
		}
	</style>
	<script>
		$(function(){
			$('.drag').draggable({
				proxy:'clone',
				revert:true,
				cursor:'auto',
				onStartDrag:function(){
					$(this).draggable('options').cursor='not-allowed';
					$(this).draggable('proxy').addClass('dp');
				},
				onStopDrag:function(){
					$(this).draggable('options').cursor='auto';
				}
			});
			$('#target').droppable({
				accept:'#d1,#d3',
				onDragEnter:function(e,source){
					$(source).draggable('options').cursor='auto';
					$(source).draggable('proxy').css('border','1px solid red');
					$(this).addClass('over');
				},
				onDragLeave:function(e,source){
					$(source).draggable('options').cursor='not-allowed';
					$(source).draggable('proxy').css('border','1px solid #ccc');
					$(this).removeClass('over');
				},
				onDrop:function(e,source){
					$(this).append(source)
					$(this).removeClass('over');
				}
			});
		});
	</script>

</body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
F
粉丝 4
博文 186
码字总数 96673
作品 0
成都
程序员
jQuery EasyUI 1.3.1 发布

jQuery easyui 为网页开发提供了一堆的常用UI组件,包括菜单、对话框、布局、窗帘、表格、表单等等逐渐, 下图是一个具有布局效果的窗口: jQuery EasyUI 1.3.1 发布,详细改进记录包括: Bu...

夏悸
2012/09/11
7.4K
15
wiQuery

wiQuery是一个将 jQuery 与 jQuery UI 集成到Java Wicket Web开发框架中的开源项目。Wicket 框架提供了一种真正采用面向对象的方式来创建Web应用程序。wiQuery支持的jQuery UI组件包括: Ta...

匿名
2009/12/06
12.4K
1
怎么取消JQueryUI对元素的droppable绑定

有若干个div.container ,$(function(){$(".container").droppable({});}); 如果我对这些DIV中的部分DIV进行了removeClass("container")操作 ,对其他的另一部分进行了addClass("container")操...

鸿则-TCS
2016/04/19
166
0
jquery.ui.draggable中文文档jquery 自由拖拽类~study~

JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动. Draggable的元素受影响css: ui-draggable, 拖动过程中的css: ui-draggable-dragging. 如果需要的不仅仅是拖, 而是一个完整的拖放...

diydit
2013/08/12
0
0
Jquery-ui draggable

Jquery ui的draggable插件让某个元素能被鼠标拖拽。 draggable和droppable的区别: draggable只是控制拖拽,如果你要控制拖拽和放下两个动作,你需要使用的是droppable插件 draggable有三个事...

王二狗子11
01/08
0
0
分享一个jQuery的时间轴插件:TimergliderJS

在线演示1 在线演示2 Timeglider JS是一个由javascript支持缩放,数据驱动的时间轴组件。非常适合显示项目历史,项目计划及其其它需要显示历史的项目。 时间轴可以通过右边拖放垂直滑动器来缩...

未来十年
2012/01/02
0
0
jQuery EasyUI 1.1发布

这个版本修正了一些BUG,增强了一些插件的功能,同时也增加了calendar,datebox,droppable,easyloader等几个插件。该版本允许使用easyloader进行插件的动态加载。 下载地址:http://jquery-e...

stworthy
2010/05/21
2.4K
3
jQuery UI 1.8.14 发布

jQuery UI 1.8 的第 14 个维护版本,修复了 Autocomplete, Button, Datepicker, Dialog, Draggable, Droppable, Resizable Sortable and Effects 的一些bug,完整记录请看 changelog. 下载地......

红薯
2011/06/29
2.5K
7
EasyUI基础入门之Parser(解析器)

前言 JQuery EasyUI提供的组件包括功能强大的DataGrid,TreeGrid、面板、下拉组合等。用户可以组合使用这些组件,也可以单独使用其中一个。(使用的形式是以插件的方式提供的) EasyUI体系结构 ...

LCore
2014/07/11
0
9
jQuery UI 1.8.24 发布

jQuery UI 1.8 的第 24 个维护版本发布,修复了 Datepicker, Draggable, Droppable and Sortable 相关问题,另外支持 jQuery 1.8.2,这应该是 1.8 的最后一个维护版本,完整记录请看 change...

oschina
2012/09/29
3.1K
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Call to undefined function Workerman\posix_getpid

workerman 在centos下报PHP Fatal error: Call to undefined function Workerman\posix_getpid posix在下面这个包中php-process...

dragon_tech
7分钟前
0
0
mysql 7.4 创建表 时  所建表 字段太多 导致失败

报错:[Err] 1118 - Row size too large (> 8126). Changing some columns to TEXT or BLOB may help. In current row format, BLOB prefix of 0 bytes is stored inline. 解决方法:把表的引......

qimh
9分钟前
0
0
语法补漏

1.if...elif...else... 代码示例: test=10 if test>9: print(1) elif test>8: print(2) elif test>7: print(3) else: print('nothing') 输出代码: 1...

十年磨一剑3344
10分钟前
0
0
Python -re模块及正则表达式解析

传送门: https://blog.csdn.net/pipisorry/article/details/25909899 ps:上面文章中"命名分组"的语法格式不能执行。正确的如下: (?P<name>正则表达式) #name是一个合法的标识符 除了使用别名...

一口今心
17分钟前
0
0
mybatis中session.getMapper方法源码分析

0开始代码AuthorMapper mapper = session.getMapper(AuthorMapper.class); 1 DefaultSqlSession类 @Override public <T> T getMapper(Class<T> type) { //最后会去调用MapperRegistry.getMap......

writeademo
25分钟前
1
0
spring cloud zuul网关的作用

zuul一般有两大作用,1是类似于Nginx的网址重定向,但zuul的重定向的一般是整个spring cloud里在Eureka注册中心的模块. zuul: ignored-services: '*' sensitiveHeaders: routes: ...

算法之名
26分钟前
9
0
java按比例之原图生成缩略图

package com.wxp.test; import java.awt.Image; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileOutputStream; import javax.imageio.ImageIO; import sun.......

恋码之子
35分钟前
1
0
SpringCloud 微服务 (十五) 服务容错 Hystrix

壹 工作中的微服务架构,某个服务通常会被多个服务调用或者多层调用完成需求,如果某个服务不可用,导致一个系统功能不可用或者服务直接没用了的情况,这种情况称为雪崩效应 有A服务调用B服务,B服...

___大侠
37分钟前
1
0
Spring框架中的设计模式(五)

Spring框架中的设计模式(五) 通过以前的4篇文章,我们看到Spring采用了大量的关于创建和结构方面的设计模式。本文将描述属于行为方面的两种设计模式:命令和访问者。 前传: Spring框架中的...

瑞查德-Jack
40分钟前
1
0
解决phpstorm运行很卡问题!

phpStorm一旦达到这个临界值,所有智能提示、自动补全都失效了 这TM就很尴尬了,顿时感觉自己就是个废人了,纯手写代码跟便秘一样 众所周知phpStorm基于JAVA,那么这个内存限制肯定跟JAVA的虚...

sjcehui2010
43分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部