第一百九十三节,jQuery EasyUI,Draggable(拖动)组件

Draggable(拖动)组件

学习要点:

  1.加载方式

  2.属性列表

  3.事件列表

  4.方法列表

本节课重点了解 EasyUI 中 Draggable(拖动)组件的使用方法,这个组件不依赖于其 他组件。

一.加载方式

//class 加载方式
<div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;">
  内容部分
</div>
//JS 加载调用
$(‘#box‘).draggable();

draggable()将一个元素实行拖拽方法,接收一个对象,对象里是属性

二.属性列表

Proxy null/string、function当使用‘clone‘,则克隆一个替代元素拖动。如果指定一个函数,则自定义替代元素。

revert false/boolean 设置为 true,则拖动停止时返回起始位置

cursor move/string 拖动时的 CSS 指针样式

deltaX null/number 被拖动的元素对应于当前光标位置 x

deltaY null/number 被拖动的元素对应于当前光标位置 y

handle null/selector 开始拖动的句柄

disabled false/boolean 设置为 true,则停止拖动

edge 0/number 可以在其中拖动的容器的宽度

axis null/string 设置拖动为垂直‘v‘,还是水平‘h‘

时间: 2024-12-23 17:44:10

第一百九十三节,jQuery EasyUI,Draggable(拖动)组件的相关文章

美学心得(第一百九十五集) 罗国正

  美学心得(第一百九十五集) 罗国正 (2018年12月) 2847.美的起点是主体本身,是感官和大脑,核心是大脑,最终在大脑落实.客体可以是诱因,但有时主体可以不要主体外的事物而产生美感.主体的大脑可以将主体的意象,或主体的某部分作为审美对象,诱发出美感.弄清这个根本的问题,就弄明白了美学的根源和逻辑起点.不然的话,就会渐行渐远,离题万里. 2848.狄德罗说:"从单一的关系的感觉得来的美,往往小于从多种关系的感觉得来的美."其实,单一的关系的感觉有强的,有弱的.多种关系的感觉也有

第一百九十六节,jQuery EasyUI,Tooltip(提示框)组件

jQuery EasyUI,Tooltip(提示框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Tooltip(提示框)组件的使用方法,,这个组件不依赖于其 他组件. 一.加载方式 //class 加载方式 <a href="http://www.ycku.com" title="这是一个提示信息!" class="easyui-tooltip">Hover Me <

jQuery Easy UI Draggable(拖动)组件

上文已经提到过了 jQuery EasyUI插件引用一般我们常用的有两种方式(排除easyload加载方式),所以本篇要总结的Draggable组件同样有两种方式加载: (1).使用class加载方式: <div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;"> 内容部分 </div> (2).JS 加载调

Draggable(拖动)组件 属性、事件、方法

Draggable(拖动)即实现页面元素的拖动效果. 一.加载方式 1.css样式加载: <div id="box" class="easyui-draggable" style="width:200px;height:150px;background:#F5F6F7;">     内容部分 </div> 使用css样式加载Draggable,方便快捷,但是不利于管理,所以我们有课第二种加载方式,使用Jquery方式加载,

Jquery easyUi Droppable(放置)组件

生活就是不断的让自己活下去,而我们如何活下去,就是靠不断的完善自己.所以今天我们来看看Jquery easyUi的Droppable(放置)组件. 一.加载方式 在使用放置组件时,有一个前提条件,那就是需要有一个可以拖拽的元素,不然我们的放置组件将毫无意义.所以我们这里默认有一个ID为"bb"的元素是设置了课拖拽的. 1.css样式加载方式 <div id="box" class="easyui-droppable" data-option

JQuery EasyUI的常用组件

jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件,该框架提供了创建网页所需的一切,帮助您轻松建立站点. 注:本次介绍的JQuery EasyUI版本为1.5版. 一.表单 form提供了各种方法来操作执行表单字段,比如:ajax提交, load, clear等等.当提交表单的时候可以调用validate方法检查表单是否有效. 用法: 使用form标签创建 <form id="ff" method="post"> <

第一百零三节,JavaScript对象和数组

JavaScript对象和数组 学习要点: 1.Object类型 2.Array类型 3.对象中的方法 什么是对象,其实就是一种类型,即引用类型.而对象的值就是引用类型的实例.在ECMAScript中引用类型是一种数据结构,用于将数据和功能组织在一起.它也常被称做为类,但ECMAScript中却没有这种东西.虽然ECMAScript是一门面向对象的语言,却不具备传统面向对象语言所支持的类和接口等基本结构. 一.Object对象类型 Object类型对象, 到目前为止,我们使用的引用类型最多的可能

Draggable(拖动)组件

1 一.加载方式 2 //class 加载方式 3 4 <div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;"> 内容部分 </div> 5 6 7 //JS 加载调用 8 9 $('#box').draggable(); 加载方式 属性列表 //属性设置 $('#box').draggable({ re

第二百零三节,jQuery EasyUI,Window(窗口)组件

jQuery EasyUI,Window(窗口)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Window(窗口)组件的使用方法,这个组件依赖于 Panel(面 板)组件.resizable(调整大小)和 draggable(拖动)组件.这个组件扩展与 Panel 组件, 最大的优势就是调整大小和拖动以及内部布局. 一.加载方式 class 加载方式 <div id="box" class="easyui-w