QueryEasyUI中的拖拽事件通过给它设置代理元素使其拖拽、可设置拖动元素相对于x.y轴拖动,可设置拖拽何时停止等效果
jQuery中的easyui是一个非常好用的插件,它虽然使用简单方便,但是它的功能确十分强大,今天将向大家介绍如何使用easyui插件实现基本的拖动和放置,有一定的参考价值,希望对大家有所帮助。
【推荐课程:jQueryEasyUI教程】
Draggable(拖拽)
Draggable是easyui中用于实现拖拽功能的一个插件,通过它我们可以实现对控件的拖拽效果。
它具有以下属性值:
属性名含义proxy
指拖动时要使用的代理元素,设置为clone时,克隆元素将被用作代理;如果指定一个函数,它必须返回一个 jQuery 对象。revert是一个boolean值,设置为 true时表示拖动结束后元素将返回它的开始位置。 (默认值为false)cursor 拖动时的 css 光标,默认值为move deltaX 指的是拖动的元素相对于当前光标的 X 轴的位置,默认值为null deltaY 指的是拖动的元素相对于当前光标的 Y 轴位置,默认值为null handle 指启动可拖动元素的处理,默认值为null disabled是一个boolean值,如果设置为 true,则停止可拖动,默认值为false edge 指能够在其中开始可拖动的拖动宽度,默认值为0 axis 指定义拖动元素可在其上移动的轴,可用的值是 'v' 或 'h',当设为 null,将会沿着 'v' 和 'h' 的方向移动
案例分析:
通过三个div元素来启用它们的拖动和放置
外部引用必须有的插件
<link rel="stylesheet" type="text/css" href="D:\jquery-easyui-1.6.10\themes\default\easyui.css">
<link rel="stylesheet" type="text/css" href="D:\jquery-easyui-1.6.10\themes\icon.css">
<script src="D:\jquery-easyui-1.6.10\jquery.min.js"></script>
<script src="D:\jquery-easyui-1.6.10\jquery.easyui.min.js"></script>
HTML与CSS代码
<style>
div{
width:100px;
height: 100px;
margin-bottom:5px;
text-align: center;
line-height: 100px;
}
#box1{background: pink;}
#box2{background: skyblue;}
#box3{background: yellow;}
</style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
效果图:
设置box1元素为可拖动的
$('#box1').draggable();
效果图:
对于box2通过给原来的元素的代理(proxy)创建一个clone值,让其可以拖动
$('#box2').draggable({
proxy:'clone'
});
效果图:
第三个box我们设置元素只能在v轴上拖动:
$("#box3").draggable({
axis: 'v'
})
效果图:
总结:以上就是本篇文章的全部内容了,希望对大家学习有所帮助。
以上就是jQueryEasyUI中的拖拽事件如何使用的详细内容,更多请关注其它相关文章!
更多技巧请《转发 + 关注》哦!
识点:jsp servlet,MySQL数据库的基本操作,前端easyui框架。
适合人群:Java初学者、在校学生,(已经学过Java基础语法,对html有简单的了解,熟悉js、jquery语法)。
用到的工具:eclipse、MySQL
看下系统的截图:
package com.ischoolbar.programmer.servlet;
import java.io.IOException;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import com.ischoolbar.programmer.dao.AttendanceDao;
import com.ischoolbar.programmer.dao.CourseDao;
import com.ischoolbar.programmer.dao.SelectedCourseDao;
import com.ischoolbar.programmer.model.Attendance;
import com.ischoolbar.programmer.model.Course;
import com.ischoolbar.programmer.model.Page;
import com.ischoolbar.programmer.model.SelectedCourse;
import com.ischoolbar.programmer.model.Student;
import com.ischoolbar.programmer.util.DateFormatUtil;
public class AttendanceServlet extends HttpServlet{
/**
*
*/
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request,HttpServletResponse response) throws IOException{
doPost(request, response);
}
public void doPost(HttpServletRequest request,HttpServletResponse response) throws IOException{
String method = request.getParameter("method");
if("toAttendanceServletListView".equals(method)){
try {
request.getRequestDispatcher("view/attendanceList.jsp").forward(request, response);
} catch (ServletException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}else if("AddAttendance".equals(method)){
AddAttendance(request,response);
}else if("AttendanceList".equals(method)){
attendanceList(request,response);
}else if("DeleteAttendance".equals(method)){
deleteAttendance(request,response);
}else if("getStudentSelectedCourseList".equals(method)){
getStudentSelectedCourseList(request, response);
}
}
private void deleteAttendance(HttpServletRequest request,
HttpServletResponse response) throws IOException {
// TODO Auto-generated method stub
int id = Integer.parseInt(request.getParameter("id"));
AttendanceDao attendanceDao = new AttendanceDao();
String msg = "success";
if(!attendanceDao.deleteAttendance(id)){
msg = "error";
}
attendanceDao.closeCon();
response.getWriter().write(msg);
}
private void attendanceList(HttpServletRequest request,
HttpServletResponse response) {
// TODO Auto-generated method stub
int studentId = request.getParameter("studentid") == null ? 0 : Integer.parseInt(request.getParameter("studentid").toString());
int courseId = request.getParameter("courseid") == null ? 0 : Integer.parseInt(request.getParameter("courseid").toString());
String type = request.getParameter("type");
String date = request.getParameter("date");
Integer currentPage = request.getParameter("page") == null ? 1 : Integer.parseInt(request.getParameter("page"));
Integer pageSize = request.getParameter("rows") == null ? 999 : Integer.parseInt(request.getParameter("rows"));
Attendance attendance = new Attendance();
//获取当前登录用户类型
int userType = Integer.parseInt(request.getSession().getAttribute("userType").toString());
if(userType == 2){
//如果是学生,只能查看自己的信息
Student currentUser = (Student)request.getSession().getAttribute("user");
studentId = currentUser.getId();
}
attendance.setCourseId(courseId);
attendance.setStudentId(studentId);
attendance.setDate(date);
attendance.setType(type);
AttendanceDao attendanceDao = new AttendanceDao();
List<Attendance> attendanceList = attendanceDao.getSelectedCourseList(attendance, new Page(currentPage, pageSize));
int total = attendanceDao.getAttendanceListTotal(attendance);
attendanceDao.closeCon();
response.setCharacterEncoding("UTF-8");
Map<String, Object> ret = new HashMap<String, Object>();
ret.put("total", total);
ret.put("rows", attendanceList);
try {
String from = request.getParameter("from");
if("combox".equals(from)){
response.getWriter().write(JSONArray.fromObject(attendanceList).toString());
}else{
response.getWriter().write(JSONObject.fromObject(ret).toString());
}
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
private void AddAttendance(HttpServletRequest request,
HttpServletResponse response) {
// TODO Auto-generated method stub
int studentId = request.getParameter("studentid") == null ? 0 : Integer.parseInt(request.getParameter("studentid").toString());
int courseId = request.getParameter("courseid") == null ? 0 : Integer.parseInt(request.getParameter("courseid").toString());
String type = request.getParameter("type").toString();
AttendanceDao attendanceDao = new AttendanceDao();
Attendance attendance = new Attendance();
attendance.setCourseId(courseId);
attendance.setStudentId(studentId);
attendance.setType(type);
attendance.setDate(DateFormatUtil.getFormatDate(new Date(), "yyyy-MM-dd"));
String msg = "success";
response.setCharacterEncoding("UTF-8");
if(attendanceDao.isAttendanced(studentId, courseId, type,DateFormatUtil.getFormatDate(new Date(), "yyyy-MM-dd"))){
msg = "已签到,请勿重复签到!";
}else if(!attendanceDao.addAttendance(attendance)){
msg = "系统内部出错。请联系管理员!";
}
try {
response.getWriter().write(msg);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
private void getStudentSelectedCourseList(HttpServletRequest request,
HttpServletResponse response) {
// TODO Auto-generated method stub
int studentId = request.getParameter("student_id") == null ? 0 : Integer.parseInt(request.getParameter("student_id").toString());
SelectedCourse selectedCourse = new SelectedCourse();
selectedCourse.setStudentId(studentId);
SelectedCourseDao selectedCourseDao = new SelectedCourseDao();
List<SelectedCourse> selectedCourseList = selectedCourseDao.getSelectedCourseList(selectedCourse, new Page(1, 999));
selectedCourseDao.closeCon();
String courseId = "";
for(SelectedCourse sc : selectedCourseList){
courseId += sc.getCourseId()+ ",";
}
courseId = courseId.substring(0,courseId.length()-1);
CourseDao courseDao = new CourseDao();
List<Course> courseList = courseDao.getCourse(courseId);
courseDao.closeCon();
response.setCharacterEncoding("UTF-8");
try {
response.getWriter().write(JSONArray.fromObject(courseList).toString());
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
点击更多,获取系统文件。
言:
我们在访问淘宝的时候,会看到代码中的js和css文件是通过一次请求或得的,我们知道浏览器一次请求只能并发访问数个资源,这样的处理错输在网络传输层面可以大大节省时间,这里使用的技术就是把css、js等静态资源合并为一个资源。淘宝使用的tengine是基于nginx的web服务器,从11年底开源。所使用的是mod_concat模块,合并多个文件在一个响应报文中。
http1.1下浏览器的并发访问资源数
IE6 2
IE7 2
IE8 6
Firefox2 2
Firefox3 6
Safari 3,4 4
Chrome 1,2 6
Opera 9.63,10.00alpha 4
一、 CENTOS下安装使用
安装nginx concat,由于此模块只能在linux环境中使用,在开发过程中如何在windows环境下使用在本文下面重点介绍。下面先介绍如何在CentOS中使用,由于此模块和nginx配合使用,而nginx一般都是由我们自己编译使用的,所以这里介绍自行编译方法,关于concat模块的具体使用技巧,网上很多文章介绍,反而在centos尤其在windows环境下如何搭建环境,至今没有一篇非常详细的文章,这也是自己汇总整理的初衷,如果网上有现成的教程,我们自己真的就懒得写了(我们都是懒人一枚)
1.安装nginx concat
cd /usr/local/src/
wget http://nginx.org/download/nginx-1.4.2.tar.gz
wget https://github.com/alibaba/nginx-http-concat/archive/master.zip -O nginx-http-concat-master.zip
unzip nginx-http-concat-master.zip
tar -xzvf nginx-1.4.2.tar.gz
cd nginx-1.4.2
vi auto/cc/gcc
#将这句注释掉 取消Debug编译模式 大概在174行
#CFLAGS="$CFLAGS -g"
我们再配置下nginx编译参数
./configure --prefix=/usr/local/app/nginx --user=www --group=www --with-http_stub_status_module --with-http_ssl_module --add-module=../nginx-http-concat-master
make
make install
当然别忘记增加用户和用户组
#/usr/sbin/groupadd -f www
#/usr/sbin/useradd -g www www
至此组件和nginx编译完成
2.nginx conf调整
Nginx的控制文件有不同的写法,我的配置文件使用了vhost所以在location段增加如下即可。
concat on;
concat_max_files 20;
concat_unique off;
concat_types text/css application/javascript;
例子如下:
## Try the requested URI as files before handling it to PHP.
location / {
## Regular PHP processing.
location ~ \.php$ {
6 root /home/webroot;
7 try_files $uri =404;
8 fastcgi_pass 127.0.0.1:9000;
9 fastcgi_index index.php;
10 fastcgi_split_path_info ^(.+\.php)(.*)$;
11 fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
12 include fastcgi_params;
13 #added by james for test
14 fastcgi_buffer_size 128k;
15 fastcgi_buffers 2 256k; # up to 1k + 128 * 1k
16 fastcgi_busy_buffers_size 256k;
17 fastcgi_temp_file_write_size 256k;
18 fastcgi_max_temp_file_size 0;
19 proxy_buffering off;
20 gzip off;
21
22
23 fastcgi_connect_timeout 75;
24 fastcgi_read_timeout 600;
25 fastcgi_send_timeout 600;
26 }
27
28 if ($request_uri ~* "system/dict"){
29 rewrite ^/(.*)/(.*)/(.*)/(.*)$ /$1/index.php last; break;
30 }
31 if ($request_uri ~* "system/menu"){
32 rewrite ^/(.*)/(.*)/(.*)/(.*)$ /$1/index.php last; break;
33 }
34 if (!-e $request_filename) {
35 rewrite ^/(.*)/(.*)/(.*)$ /$1/index.php last; break;
36 }
37
38 concat on;
39 concat_max_files 20;
40 concat_unique off;
41 concat_types text/css application/javascript;
42 } # / location
重启ninx应用即可生效。
#Killall nginx
#nginx
3.页面写法
Concat需要使用两个?来标明作用域,具体的使用细节网上很多文章已经介绍的很详细了,这也不是本文的重点,这里只是给出一个示例。注意啊,css要在上面啊,不清楚的自己搜索下http请求优化。
1 <link rel="stylesheet" type="text/css" href="/??ui/easyui/themes/icon.css,ui/easyui/themes/default/easyui.css,console/portal/resources/css/style.css">
2 <script type="text/javascript" src="/ui/easyui/??jquery.min.js,jquery.easyui.min.js"></script>
二、 在windows 下的使用
是不是觉得上面很简单啊,我也觉得,但是在windows下就悲催了,concat只能在linux环境下,但是现在一般我们的开发环境就是在windows下,调试起来非常不方便,这就需要我们有一个可以在windows 下编译进去concat模块的nginx.exe,怎么办,只能自己编译了,因为大家实际项目中采用的nginx中的编译参数千差万别,不可能从网上下载一个别人编译好的就能用的。
在windows下我们需要使用cygwin,具体这个软件如何使用,教程一大把,我们就用它来作为一个linux通向windows的桥梁。
1. 安装cygwin
从网上可以下载已经集成了一部分组件的软件或者是自己下载的都行,这里需要注意的是,因为我们在实际使用中,在不同的时候需要不同的组件,因此迫切需要一个类似在CENTOS中的yum中的东西,在cygwin中还真有,叫做apt-cyg
1 lynx -source rawgit.com/transcode-open/apt-cyg/master/apt-cyg > apt-cyg
2 install apt-cyg /bin
3 Example use of apt-cyg:
4 apt-cyg install nano
当然apt-cyg还有很多功能,自己apt-cyg –help
2. 在cygwin中编译nginx
搭建好cygwin环境中,我们看到大部分的操作和linux中操作不大,但是我们一旦用上,会发现很多地方有一些小的差异,比如vi我们的上下键和退回键完全不生效,产生了一堆莫名其妙的ABCD,我也是尝试了半天不起作用,没办法用了vim,哎还真还用,别纠结vi了用vim,难怪linux中很多人也说vim更好用。
在编译nginx之前我们需要下载一些包,这些当然是用apt-cyg install了,但是注意一些不能一起安装,那就一个一个安装好。
在安装的时候如果还提示缺少包,那按照提示安装对应的包即可。
2.1 下载安装nginx
1 # cd /usr/local/src/
2 # wget http://nginx.org/download/nginx-1.4.2.tar.gz
3 #wget https://github.com/alibaba/nginx-http-concat/archive/master.zip -O nginx-http-concat-master.zip
4 # unzip nginx-http-concat-master.zip
5 # tar -xzvf nginx-1.4.2.tar.gz
6 # cd nginx-1.4.2
7 vi auto/cc/gcc
8 #将这句注释掉 取消Debug编译模式 大概在174行
9 #CFLAGS="$CFLAGS -g"
10 #我们再配置下nginx编译参数
以上我们和在centos中完全一样,但是注意接下来我们在编译的时候—prefix参数不能指定死,因为如果我们在这里指定类似/usr/local的路径,那我们只能在cygwin环境中使用了,但是我们是要在windows中使用,这里就必须使用相对地址,也也是为什么后面我们的程序文件不能随便在windows下的盘符的原因。这里给出我的编译参数
1 ./configure \
2 --prefix=. \
3 --user=www \
4 --group=www1 \
5 --with-http_stub_status_module \
6 --with-http_ssl_module \
7 --add-module=../nginx-http-concat-master
2.2 用户和组处理
先不要执行,这里我们使用的用户www和组www1还没有建立,但是在cygwin中没有useadd和groupadd找了很多资料,中文的基本没有才搞清楚,cygwin是使用的windows的用户和组,这里我们先在windows中建立用户www和组www1,为什么组是www1,万恶的windows竟然不让组和用户一个名,不过没关系
然后在cygwin中执行,就是把windows中的用户和组同步到cygwin中
1 mkpasswd -l > /etc/passwd
2 mkgroup -l > /etc/group
执行完毕后cat下passwd和group看用户和组导入进去没有
2.3 编译make错误处理
这里大家可能会遇到各种问题,我的编译没问题在make阶段报错提示ngx_user.c文件中的crypt错误,找了很多资料没有发现大家和我一样的问题,既然是crypt肯定是加密,检查了crypt包也安装了(apt-cyg install crypt),最后直接修改了源码的c文件把加密的这步省略了,就过去了。
1 原始文件:
2 value = crypt((char *) key, (char *) salt);
3 直接修改为:
4 value = (char *) salt);
3. 使用nginx.exe
我们把编译好的nginx.exe直接copy到我们的wnmp环境中,替换nginx文件后是不能直接使用的会提示缺少很多dll的,按照提示把这些dll拷贝到和nginx同级的目录即可,我们的是这些dll
启动后虽然没有报错,但是页面报404,我们运行nginx.exe –t发现提示连接数错误,这里有很多修改办法,由于开发环境没有那么多连接数,直接修改nginx.conf修改为64
worker_connections 64;
启动,OK,运行info.php没问题,一切正常。但是别高兴,后面还有问题,因为我们在windows的开发环境下,我们的配置参数一般都是d:\work\类似的路径,info.php能运行起来,我们的项目不一定能运行起来,因为我们之前编译使用的相对路径,因为../d:\abc实际上是不能运行的。因为我们需要将我们的工程文件放入到html文件中,同时我们对应的配置nginx.conf文件修改对应的工程路径即可。
*请认真填写需求信息,我们会在24小时内与您取得联系。