轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作

2024-10-18 03:22:10

本教程向您展示如何使 HTML 元素可拖动，在本例中，我们将创建三个 DIV 元素然后启用他们的拖动和放置。

首先，我们创建三个<div> 元素：

<div id="dd1" class="dd-demo"></div>
<div id="dd2" class="dd-demo"></div>
<div id="dd3" class="dd-demo"></div>

对于第一个>div<元素，我们通过默认值让其可以拖动。
$('#dd1').draggable();
对于第二个 <div> 元素，我们通过创建一个克隆（clone）了原来元素的代理（proxy）让其可以拖动。

$('#dd2').draggable({
 proxy:'clone'
});

对于第三个<div> 元素，我们通过创建自定义代理（proxy）让其可以拖动。

$('#dd3').draggable({
 proxy:function(source){
 var p = $('<div class="proxy">proxy</div>');
 p.appendTo('body');
 return p;
 }
});

下面为大家分享学校课程表简单实例，欢迎大家学习：

我们将创建两个表格：在左侧显示学校科目，在右侧显示时间表。您可以拖动学校科目并放置到时间表单元格上。学校科目是一个 <div class="item"> 元素，时间表单元格是一个 <td class="drop"> 元素。

显示学校科目

<div class="left">
 <table>
 <tr>
  <td><div class="item">English</div></td>
 </tr>
 <tr>
  <td><div class="item">Science</div></td>
 </tr>
 <!-- other subjects -->
 </table>
</div>

显示时间表

<div class="right">
 <table>
 <tr>
  <td class="blank"></td>
  <td class="title">Monday</td>
  <td class="title">Tuesday</td>
  <td class="title">Wednesday</td>
  <td class="title">Thursday</td>
  <td class="title">Friday</td>
 </tr>
 <tr>
  <td class="time">08:00</td>
  <td class="drop"></td>
  <td class="drop"></td>
  <td class="drop"></td>
  <td class="drop"></td>
  <td class="drop"></td>
 </tr>
 <!-- other cells -->
 </table>
</div>

拖动在左侧的学校科目

$('.left .item').draggable({
 revert:true,
 proxy:'clone'
});

放置学校科目在时间表单元格上

$('.right td.drop').droppable({
 onDragEnter:function(){
 $(this).addClass('over');
 },
 onDragLeave:function(){
 $(this).removeClass('over');
 },
 onDrop:function(e,source){
 $(this).removeClass('over');
 if ($(source).hasClass('assigned')){
  $(this).append(source);
 } else {
  var c = $(source).clone().addClass('assigned');
  $(this).empty().append(c);
  c.draggable({
  revert:true
  });
 }
 }
});

正如您所看到的上面的代码，当用户拖动在左侧的学校科目并放置到时间表单元格中时，onDrop 回调函数将被调用。我们克隆从左侧拖动的源元素并把它附加到时间表单元格上。当把学校科目从时间表的某个单元格拖动到其他单元格，只需简单地移动它即可。

以上就是为大家展示的如何使用jQuery EasyUI创建一个学校课程表，希望对大家的学习有所帮助，大家会喜欢，并且继续关注小编的下一篇文章。

jQuery插件slider实现拖动滑块选取价格范围

在一些产品报价网站上,需要给出一系列价格范围供用户筛选,我们在筛选的范围之外再加一个自定义价格范围,这样为用户多提供了一种选择方式.本文将使用jQuery插件结合CSS实现使用滑块滑动的方式选择价格范围,请看本文讲解. jQuery ui 有个slider插件,就是一个非常好使的拖动滑块插件.要想实现滑块拖动,需要在页面head间先载入如下js. <script type="text/javascript" src="js/jquery.js"><
PHP+jQuery实现随意拖动层并即时保存拖动位置

想拖动页面上的层,完全可以用jQuery ui的Draggable方法来实现,那如何将拖动后层的位置保存下来呢?本文将给出答案.本文讲解了如何采用PHP+MySQL+jQuery,实现随意拖动层并即时保存拖动位置. 之前我有文章:,文中以项目为示例,讲解了实现拖动布局的方法.本文与之不同之处在于可以任意拖动页面位置,原理就是通过拖动将拖动后层的相对位置left,top和z-index三个参数更新到数据表中对应的记录,页面通过CSS解析每个层不同的位置.请看具体实现步骤. 准备MySQL数据表首
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解

想拖动页面上的层,完全可以用jQuery ui的Draggable方法来实现,那如何将拖动后层的位置保存下来呢?本文将给出答案.本文讲解了如何采用PHP+MySQL+jQuery,实现随意拖动层并即时保存拖动位置. 本文原理就是通过拖动将拖动后层的相对位置left,top和z-index三个参数更新到数据表中对应的记录,页面通过CSS解析每个层不同的位置.请看具体实现步骤. 准备MySQL数据表首先需要准备一张表notes,用来记录层的内容,背景色和坐标等信息. CREATE TABLE IF
jquery拖动层效果插件用法实例分析(附demo源码)

本文实例讲述了jquery拖动层效果插件用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="l
基于jquery的拖动布局插件

复制代码代码如下: (function($){ $.fn.lsMovePanel=function(){ var id=this.attr("id"); var X=Y=0; var offsetX=offsetY=0;//绝对位置 var OldIndex=0;///存储原始索引 var Temp_Li="<li id=\"Temp_Li\" style=\"background-color:#FFFFFF;border-color:#
jquery拖动插件(jquery.drag)使用介绍

复制代码代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery Dynamic Drag'n Drop</title> <script type="te
使用jQuery的easydrag插件实现可拖动的DIV弹出框

EasyDrag 是一个用来实现页面元素拖拉的 jQuery 插件. 在没遇到easydrag插件之前,想实现一个弹出框并不是一件轻而易举的事情! 人们常说没有不劳而获的事情,但在编码的世界中却不是这样.更多的开源框架方面了我们,也毒害了我们! 废话少说,先看效果: 全部代码: <!DOCTYPE HTML> <html> <head> <title>easydrag实现可拖动的DIV弹出框</title> <style> /* 重置
jQuery 拖动层(在可视区域范围内)

复制代码代码如下: (function($){ $.fn.extend({ mydrag:function(){ var boxX = 0; //元素在页面中的横坐标 var boxY = 0; //元素在页面中的纵坐标 var dMouseX = 0; //按下鼠标时的鼠标所在位置的横坐标 var dMouseY = 0; //按下鼠标时的鼠标所在位置的纵坐标 var mMouseX = 0; //移动鼠标时的鼠标所在位置的横坐标 var mMouseY = 0; //移动鼠标时的鼠标所在位
轻松学习jQuery插件EasyUI EasyUI创建树形网络（1）

一.EasyUI创建基础树形网格树形网格(TreeGrid)组件从数据网格(DataGrid)继承,但是允许在行之间存在父/子节点关系.许多属性继承至数据网格(DataGrid),可以用在树形网格(TreeGrid)中.为了使用树形网格(TreeGrid),用户必须定义 'treeField' 属性,指明哪个字段作为树节点. 本文将向您展示如何使用树形网格(TreeGrid)组件设置一个文件夹浏览. 创建树形网格(TreeGrid) <table id="test" title
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作（2）

一.EasyUI树形网格动态加载动态加载树形网格有助于从服务器上加载部分的行数据,避免加载大型数据的长时间等待.本教程将向您展示如何创建带有动态加载特性的树形网格(TreeGrid). 创建树形网格(TreeGrid) <table title="Products" class="easyui-treegrid" style="width:700px;height:300px" url="treegrid3_getdata.ph
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作

本教程向您展示如何使 HTML 元素可拖动,在本例中,我们将创建三个 DIV 元素然后启用他们的拖动和放置. 首先,我们创建三个<div> 元素: <div id="dd1" class="dd-demo"></div> <div id="dd2" class="dd-demo"></div> <div id="dd3" class=&quo
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器

本文实例讲述了通过 jQuery EasyUI框架创建一个RSS阅读器,分享给大家供大家参考.具体如下: 运行效果截图如下: 我们将使用以下插件: layout:创建应用的用户界面. datagrid:显示 RSS Feed 列表. tree:显示 feed 频道. 步骤 1:创建布局(Layout) <body class="easyui-layout"> <div region="north" border="false"
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用

数据收集并妥善管理数据是网络应用共同的必要.CRUD 允许我们生成页面列表,并编辑数据库记录.本教程将向你演示如何使用 jQuery EasyUI 框架实现一个 CRUD DataGrid. 我们将使用下面的插件: datagrid:向用户展示列表数据. dialog:创建或编辑一条单一的用户信息. form:用于提交表单数据. messager:显示一些操作信息. 一.EasyUI创建CRUD应用步骤 1:准备数据库我们将使用 MySql 数据库来存储用户信息.创建数据库和 'users'
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车

在本文中,我们将向您展示如何创建一个启用用户拖动和放置用户想买的商品的购物车页面,购物篮中的物品和价格将更新,分享给大家,具体内容如下: 效果图: 具体代码如下显示页面上的商品: <ul class="products"> <li> <a href="#" class="item"> <img src="images/shirt1.gif"/> <div> <
轻松学习jQuery插件EasyUI EasyUI创建树形菜单

一.EasyUI使用标记创建树形菜单一个树形菜单(Tree)可以从标记创建.easyui 树形菜单(Tree)也可以定义在 <ul> 元素中.无序列表的 <ul> 元素提供一个基础的树(Tree)结构.每一个 <li> 元素将产生一个树节点,子 <ul> 元素将产生一个父树节点. 创建树形菜单(Tree) <ul class="easyui-tree"> <li> <span>Folder</s
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮

一.EasyUI创建简单的菜单菜单(Menu)定义在一些 DIV 标记中,如下所示: <div id="mm" class="easyui-menu" style="width:120px;"> <div onclick="javascript:alert('new')">New</div> <div> <span>Open</span> <div
轻松学习jQuery插件EasyUI EasyUI表单验证

一.EasyUI创建异步提交表单本文向您展示如何通过 easyui 提交一个表单(Form).我们创建一个带有 name.email 和 phone 字段的表单.通过使用 easyui 表单(form)插件来改变表单(form)为 ajax 表单(form).表单(form)提交所有字段到后台服务器,服务器处理和发送一些数据返回到前端页面.我们接收返回数据,并将它显示出来. 创建表单(Form) <div style="padding:3px 2px;border-bottom:1px
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法

最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证

轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作

相关推荐

随机推荐