整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          jQueryEasyUI中的拖拽事件如何使用

          QueryEasyUI中的拖拽事件通過給它設(shè)置代理元素使其拖拽、可設(shè)置拖動元素相對于x.y軸拖動,可設(shè)置拖拽何時停止等效果

          jQuery中的easyui是一個非常好用的插件,它雖然使用簡單方便,但是它的功能確十分強(qiáng)大,今天將向大家介紹如何使用easyui插件實現(xiàn)基本的拖動和放置,有一定的參考價值,希望對大家有所幫助。

          【推薦課程:jQueryEasyUI教程】

          Draggable(拖拽)

          Draggable是easyui中用于實現(xiàn)拖拽功能的一個插件,通過它我們可以實現(xiàn)對控件的拖拽效果。

          它具有以下屬性值:

          屬性名含義proxy

          指拖動時要使用的代理元素,設(shè)置為clone時,克隆元素將被用作代理;如果指定一個函數(shù),它必須返回一個 jQuery 對象。revert是一個boolean值,設(shè)置為 true時表示拖動結(jié)束后元素將返回它的開始位置。 (默認(rèn)值為false)cursor 拖動時的 css 光標(biāo),默認(rèn)值為move deltaX 指的是拖動的元素相對于當(dāng)前光標(biāo)的 X 軸的位置,默認(rèn)值為null deltaY 指的是拖動的元素相對于當(dāng)前光標(biāo)的 Y 軸位置,默認(rèn)值為null handle 指啟動可拖動元素的處理,默認(rèn)值為null disabled是一個boolean值,如果設(shè)置為 true,則停止可拖動,默認(rèn)值為false edge 指能夠在其中開始可拖動的拖動寬度,默認(rèn)值為0 axis 指定義拖動元素可在其上移動的軸,可用的值是 'v' 或 'h',當(dāng)設(shè)為 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>

          效果圖:

          設(shè)置box1元素為可拖動的

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

          效果圖:

          對于box2通過給原來的元素的代理(proxy)創(chuàng)建一個clone值,讓其可以拖動

          $('#box2').draggable({

          proxy:'clone'

          });

          效果圖:

          第三個box我們設(shè)置元素只能在v軸上拖動:

          $("#box3").draggable({

          axis: 'v'

          })

          效果圖:

          總結(jié):以上就是本篇文章的全部內(nèi)容了,希望對大家學(xué)習(xí)有所幫助。

          以上就是jQueryEasyUI中的拖拽事件如何使用的詳細(xì)內(nèi)容,更多請關(guān)注其它相關(guān)文章!

          更多技巧請《轉(zhuǎn)發(fā) + 關(guān)注》哦!

          識點:jsp servlet,MySQL數(shù)據(jù)庫的基本操作,前端easyui框架。

          適合人群:Java初學(xué)者、在校學(xué)生,(已經(jīng)學(xué)過Java基礎(chǔ)語法,對html有簡單的了解,熟悉js、jquery語法)。

          用到的工具:eclipse、MySQL

          看下系統(tǒng)的截圖:










          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();

          //獲取當(dāng)前登錄用戶類型

          int userType = Integer.parseInt(request.getSession().getAttribute("userType").toString());

          if(userType == 2){

          //如果是學(xué)生,只能查看自己的信息

          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 = "已簽到,請勿重復(fù)簽到!";

          }else if(!attendanceDao.addAttendance(attendance)){

          msg = "系統(tǒng)內(nèi)部出錯。請聯(lián)系管理員!";

          }

          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();

          }

          }

          }

          點擊更多,獲取系統(tǒng)文件。

          言:

          我們在訪問淘寶的時候,會看到代碼中的js和css文件是通過一次請求或得的,我們知道瀏覽器一次請求只能并發(fā)訪問數(shù)個資源,這樣的處理錯輸在網(wǎng)絡(luò)傳輸層面可以大大節(jié)省時間,這里使用的技術(shù)就是把css、js等靜態(tài)資源合并為一個資源。淘寶使用的tengine是基于nginx的web服務(wù)器,從11年底開源。所使用的是mod_concat模塊,合并多個文件在一個響應(yīng)報文中。

          http1.1下瀏覽器的并發(fā)訪問資源數(shù)

          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環(huán)境中使用,在開發(fā)過程中如何在windows環(huán)境下使用在本文下面重點介紹。下面先介紹如何在CentOS中使用,由于此模塊和nginx配合使用,而nginx一般都是由我們自己編譯使用的,所以這里介紹自行編譯方法,關(guān)于concat模塊的具體使用技巧,網(wǎng)上很多文章介紹,反而在centos尤其在windows環(huán)境下如何搭建環(huán)境,至今沒有一篇非常詳細(xì)的文章,這也是自己匯總整理的初衷,如果網(wǎng)上有現(xiàn)成的教程,我們自己真的就懶得寫了(我們都是懶人一枚)

          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編譯參數(shù)

          ./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

          當(dāng)然別忘記增加用戶和用戶組

          #/usr/sbin/groupadd -f www
          #/usr/sbin/useradd -g www www

          至此組件和nginx編譯完成

          2.nginx conf調(diào)整

          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應(yīng)用即可生效。

          #Killall nginx

          #nginx

          3.頁面寫法

          Concat需要使用兩個?來標(biāo)明作用域,具體的使用細(xì)節(jié)網(wǎng)上很多文章已經(jīng)介紹的很詳細(xì)了,這也不是本文的重點,這里只是給出一個示例。注意啊,css要在上面啊,不清楚的自己搜索下http請求優(yōu)化。

          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環(huán)境下,但是現(xiàn)在一般我們的開發(fā)環(huán)境就是在windows下,調(diào)試起來非常不方便,這就需要我們有一個可以在windows 下編譯進(jìn)去concat模塊的nginx.exe,怎么辦,只能自己編譯了,因為大家實際項目中采用的nginx中的編譯參數(shù)千差萬別,不可能從網(wǎng)上下載一個別人編譯好的就能用的。

          在windows下我們需要使用cygwin,具體這個軟件如何使用,教程一大把,我們就用它來作為一個linux通向windows的橋梁。

          1. 安裝cygwin

          從網(wǎng)上可以下載已經(jīng)集成了一部分組件的軟件或者是自己下載的都行,這里需要注意的是,因為我們在實際使用中,在不同的時候需要不同的組件,因此迫切需要一個類似在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

          當(dāng)然apt-cyg還有很多功能,自己apt-cyg –help

          2. 在cygwin中編譯nginx

          搭建好cygwin環(huán)境中,我們看到大部分的操作和linux中操作不大,但是我們一旦用上,會發(fā)現(xiàn)很多地方有一些小的差異,比如vi我們的上下鍵和退回鍵完全不生效,產(chǎn)生了一堆莫名其妙的ABCD,我也是嘗試了半天不起作用,沒辦法用了vim,哎還真還用,別糾結(jié)vi了用vim,難怪linux中很多人也說vim更好用。

          在編譯nginx之前我們需要下載一些包,這些當(dāng)然是用apt-cyg install了,但是注意一些不能一起安裝,那就一個一個安裝好。

          • openssl、pcre、zlib、automake 、bison 、curl-devel 、flex 、libiconv 、libmcrypt-devel 、libtool 、libxml2 、libxml2-devel 、patchutils 、pcre-devel 、jpeg 、libmcrypt 、libpcre-devel、openssl-devel

          在安裝的時候如果還提示缺少包,那按照提示安裝對應(yīng)的包即可。

          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編譯參數(shù)

          以上我們和在centos中完全一樣,但是注意接下來我們在編譯的時候—prefix參數(shù)不能指定死,因為如果我們在這里指定類似/usr/local的路徑,那我們只能在cygwin環(huán)境中使用了,但是我們是要在windows中使用,這里就必須使用相對地址,也也是為什么后面我們的程序文件不能隨便在windows下的盤符的原因。這里給出我的編譯參數(shù)

          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 用戶和組處理

          先不要執(zhí)行,這里我們使用的用戶www和組www1還沒有建立,但是在cygwin中沒有useadd和groupadd找了很多資料,中文的基本沒有才搞清楚,cygwin是使用的windows的用戶和組,這里我們先在windows中建立用戶www和組www1,為什么組是www1,萬惡的windows竟然不讓組和用戶一個名,不過沒關(guān)系

          然后在cygwin中執(zhí)行,就是把windows中的用戶和組同步到cygwin中

          1 mkpasswd -l > /etc/passwd 
          2 mkgroup -l > /etc/group 

          執(zhí)行完畢后cat下passwd和group看用戶和組導(dǎo)入進(jìn)去沒有

          2.3 編譯make錯誤處理

          這里大家可能會遇到各種問題,我的編譯沒問題在make階段報錯提示ngx_user.c文件中的crypt錯誤,找了很多資料沒有發(fā)現(xiàn)大家和我一樣的問題,既然是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環(huán)境中,替換nginx文件后是不能直接使用的會提示缺少很多dll的,按照提示把這些dll拷貝到和nginx同級的目錄即可,我們的是這些dll

          啟動后雖然沒有報錯,但是頁面報404,我們運行nginx.exe –t發(fā)現(xiàn)提示連接數(shù)錯誤,這里有很多修改辦法,由于開發(fā)環(huán)境沒有那么多連接數(shù),直接修改nginx.conf修改為64

          worker_connections 64;

          啟動,OK,運行info.php沒問題,一切正常。但是別高興,后面還有問題,因為我們在windows的開發(fā)環(huán)境下,我們的配置參數(shù)一般都是d:\work\類似的路徑,info.php能運行起來,我們的項目不一定能運行起來,因為我們之前編譯使用的相對路徑,因為../d:\abc實際上是不能運行的。因為我們需要將我們的工程文件放入到html文件中,同時我們對應(yīng)的配置nginx.conf文件修改對應(yīng)的工程路徑即可。


          主站蜘蛛池模板: 精品国产亚洲一区二区三区在线观看 | 丝袜人妻一区二区三区| 在线视频一区二区| 日韩一区二区精品观看| 精品成人乱色一区二区| 久久国产一区二区三区| 国产在线精品一区二区三区不卡| 天堂不卡一区二区视频在线观看| 国产伦精品一区二区三区免费迷 | 无码人妻一区二区三区精品视频| 国模极品一区二区三区| 精品国产亚洲一区二区三区在线观看 | 东京热无码一区二区三区av| 日本精品一区二区三本中文| 无码精品一区二区三区| 国产手机精品一区二区| 色婷婷香蕉在线一区二区| 在线成人一区二区| 天码av无码一区二区三区四区 | 国产波霸爆乳一区二区 | 国产一区视频在线免费观看| 亚洲欧美日韩国产精品一区| 麻豆视传媒一区二区三区| 成人区人妻精品一区二区不卡网站 | 日韩电影一区二区三区| 亚洲一区无码精品色| 久久久久女教师免费一区| 中文字幕一区二区三区四区| 国产在线精品一区二区三区直播 | 日本精品无码一区二区三区久久久| 日本无卡码免费一区二区三区| 亚洲国产精品一区二区第一页免 | 国产在线视频一区二区三区| 国模无码视频一区二区三区| 国产无线乱码一区二三区| 日本不卡免费新一区二区三区| 国产成人欧美一区二区三区| 国产成人一区二区三区电影网站 | 国产一区二区影院| 日本一区二区在线不卡| 日本内射精品一区二区视频 |