中如何使用echart_jQueryEasyUI中的拖拽事件如何使用

jQueryEasyUI中的拖拽事件通过给它设置代理元素使其拖拽、可设置拖动元素相对于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元素来启用它们的拖动和放置

外部引用必须有的插件

HTML与CSS代码

div{

width:100px;

height: 100px;

margin-bottom:5px;

text-align: center;

line-height: 100px;

}

#box1{background: pink;}

#box2{background: skyblue;}

#box3{background: yellow;}

box1

box2

box3

效果图：

设置box1元素为可拖动的

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

效果图：

对于box2通过给原来的元素的代理(proxy)创建一个clone值，让其可以拖动

$('#box2').draggable({

proxy:'clone'

});

效果图：

第三个box我们设置元素只能在v轴上拖动：

$("#box3").draggable({

axis: 'v'

})

效果图：

总结：以上就是本篇文章的全部内容了，希望对大家学习有所帮助。

中如何使用echart_jQueryEasyUI中的拖拽事件如何使用相关推荐

JavaScript中的拖拽事件且限制出界
JavaScript中的拖拽事件限制出界 JavaScript事件中很多都会用到拖拽,而在现实中很多拖拽是会限制在浏览器界面禁止出界的,下面是封装好的限制出界的拖拽事件. function drag( ...
JS实现拖拽并解决拖拽过程中鼠标抬起仍旧处于拖拽状态问题
需求分析实现一个任意元素可以被鼠标任意拖拽:鼠标在这个元素上按下,开始拖拽,元素跟着鼠标一起移动,当鼠标松开时,被拖拽的元素固定在当前位置上.如图所示(底下灰色的轨迹不知道为啥录制动图就出现了,实际 ...
弹出框的鼠标拖拽事件
几个与定位有关的概念: js: clientX/clientY属性:获得事件发生时鼠标指针在视口中的水平和垂直坐标. screenX/screenY属性:获取鼠标事件发生时鼠标光标相对于整个电脑屏幕的 ...
UGUI事件之Drag拖拽事件
UI事件之Drag拖拽事件 ======================================================== 2.UGUI 事件命名空间当我们需要使用 UGUI 中的 ...
[html] HTML5拖拽事件的顺序是什么？
[html] HTML5拖拽事件的顺序是什么? ondragstart :源对象开始被拖动 ondrag:源对象被拖动过程中 ondragend:源对象被拖动结束ondragenter:源对象拖动着进 ...
Android--Launcher拖拽事件详解【androidICS4.0--Launcher系列二】
AndroidICS4.0版本的launcher拖拽的流程,基本和2.3的相似.就是比2.3写的封装的接口多了一些,比如删除类的写法就多了个类.等等.4.0的改变有一些,但是不是特别大.这个月一直 ...
html css拖拽设计,css绘制三角形和 HTML拖拽事件
利用css制作三角形利用设置边框的三个边的长度和border实现三角形设置,并隐藏其他边例子:#yz3{ display: inline-block; 0; height: 0; border-t ...
pc 端与移动端区分点击与拖拽事件
pc 端与移动端区分点击与拖拽事件 PC 端移动端在 html 的应用中,拖拽事件为 mousedown -> mousemove -> mouseup 三个事件组成,在一个有拖拽事件 ...
JavaScript学习第十六天（键盘事件、表单事件、拖拽事件、框架事件、媒体事件）
文章目录键盘事件表单事件剪贴板事件拖拽事件打印事件框架事件媒体事件总结键盘事件 onkeydown 键盘按下事件,当有按键按下时触发 onkeyup 键盘松开事件,当有按键被松开时触 ...

中如何使用echart_jQueryEasyUI中的拖拽事件如何使用

中如何使用echart_jQueryEasyUI中的拖拽事件如何使用相关推荐

最新文章

热门文章