收藏本站 收藏本站
积木网首页 - 技术学院 - 软件测试 - 网站黄页 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > jQuery > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

easyui Draggable组件实现拖动效果

easyui做为一个封装了JQusey的UI插件,其实还是蛮好用的,至少省了像我这种渣渣很多时间。

Draggable的加载方式有两种:

1,通过class加载,如下:

<div id="box" class="easyui-draggable"></div>

通过JS加载,如下:

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

以上两点需要注意的是不管是'easyui-draggable',还是draggable 都是固定的,他们都是通过调用easyui已经写好的函数,来实现jQuery效果的。

Draggable的属性:

  revert 当值为true时,拖动停止时返回起始位置,可以到处拖。

revert : boolean,

  axis  限制拖动的方向,水平'h'?垂直'v'?这个和 revert组合起来比较有意思,设置拖动方向为

      垂直的话就跟微信,微博刷新消息一样。

axis : String/'v'/'h',

  proxy  克隆,就是拖动的时候要拖动的对象不变,然后在鼠标上复制一个要拖动的对象,当然也

      可以是其他的,可以触发function。

proxy : null/String/function,
  然后还有很多其他的属性,觉得并不是特别有趣。

cursor : move/String , //指定拖动时候指针的CSS样式 变得美美哒
deltaX : null/number,
deltaY : null/number, //被拖动的元素对应于当前光标位置的x,y 就是给被 拖动元素与光标一个距离
handle : null/selector //开始拖动的句柄 手柄!只能用手柄拖动!对的!
disabled : boolean //设置为true是,不能拖动当先绑定的元素
edge : number //可以在其中拖动的容器的宽度 从容器的上下左右往里算 ,就像一个矩形里面包着一个矩形 ,然后里面那只有鼠标放在里面矩形的时候元素才能被拖动

例子:

$('#box').draggable({
  revert : true,
  cursor: 'text',
  handle : '#pox',
  disabled : false,
  edge : 50,
  axis :'v',
  proxy : 'clone',
  deltaX: 10,
  deltaY : 10,
  proxy: function(source){
    console.log('呵呵哒!');
  }
});

Draggable的事件:

  onBeforeDrag 拖动之前触发,返回false将取消拖动

onBeforeDrag : function (e){
  alert('拖动之前触发');
  return false;
}

  onStartDrag 拖动时触发

onStartDrag : function(e){
  alert('拖动时触发');
}

  onDrag 拖动过程中触发,不能拖动事返回false

onDrag : function(e){
  alert('拖动过程触发');
}

  onDrag 停止拖动时触发

onStopDrag : function (e){
  alert('在拖动停止时触发');
}

 Draggable 方法列表

  options 返回属性对象

console.log($('#box').draggable('options'));

  proxy 如果代理属性被设置则返回该拖动代理元素

console.log($('#box').draggable('proxy'));

  enable 可以被拖动

$('#box').draggable('enable');

  disable 禁止被拖动

$('#box').draggable('disable');

我们来看个简单的例子

<pre class="brush:java;">html>
 
 
 
  <meta charset="UTF-8">
  <title>Basic Draggable - jQuery EasyUI Demo</title>
  <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css">
  <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css">
  <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css">
  <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script>
  <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
 
 
 
  <h2>Basic Draggable</h2>
  <p>Move the boxes below by clicking on it with mouse.</p>
  <div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">
    <div id="title" style="background:#ccc;width:100px;height:100px;">容器里面的内容</div>
  </div>
  <script>
    $(function () {
 
      $("#title").draggable({
        proxy: function (a) {
          var a = $('<div class="proxy_div">你拖我干啥</div>');
          a.appendTo('body');
          return a;
        },
        cursor: 'pointer',
        edge: '6'
      });
    });
  </script>
 
 
</pre><br><br>

以上差不多就是Easyui 1.2.5 Draggable的全部属性,事件、方法和示例了, 如果有什么不对的话,欢迎评论,一起讨论和赐教。

jQuery左侧大图右侧小图焦点图幻灯切换代码分享
这是一款基于jQuery实现的右侧选项卡焦点图片轮播动画特效源码,每个图片的内容信息可以根据自己的喜好进行隐藏与显示,是一段超酷的焦点图轮播

jQuery蓝色风格滑动导航栏代码分享
这是一款基于jQuery蓝色风格滑动导航栏特效源码,实现滑块跟随鼠标左右滑动,和一般的导航相比很有动感,是一段超酷的导航栏滑动代码。使用方法

jQuery实现的仿select功能代码
本文实例讲述了jQuery实现的仿select功能。分享给大家供大家参考。具体如下:这里重新再次与大家分享jQuery仿select功能,这个实现起来倒不复杂,就当

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号