收藏本站 收藏本站
积木网首页 - 技术学院 - 软件测试 - 网站黄页 - 常用手册 - 站长工具 - 技术社区
首页 > 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 Droppable组件实现放置特效

所谓放置,就是将一个物体放入一个物体内,当然对于easyui来说触发各种效果是必不可少的,同时这个组件也不会依赖于其他组件。

  Droppable的加载方式

  1,class 加载 一直不太喜欢class方式的加载 浪费一个位置,代码一多还看着乱七八糟的。

<div id='dd' class="easyui-droppable" data-options="accept:'#box,#pox'"></div>

  2,js 加载调用

$("#box").droppable({
  accept:'#pox',     //将元素pox 放置在元素box中
});  
 

  Droppable的属性

    1,accept     默认为null,确定哪些元素被接受,也就是那个元素能被放置

$("#box").droppable({
  accept:'#pox',     //将元素pox 放置在元素box中
});  

    2,deisabled  默认为false 如果为true,则禁止放置

$("#box").droppable({
  accept:'#pox',     //将元素pox 放置在元素box中
  disabled : true ,    //禁止放置
});

  Droppable 事件列表

  1,onDragEnter 在被拖拽元素到放置区域内的时候触发

  2,onDragOver 在被拖拽元素经过放置区域的时候触发

  3,onDragLeave 在被拖拽元素离开放置区域的时候触发

  4,onDrop 在被拖拽元素放入到放置区的时候触发

 onDragEnter /onDragOver/onDragLeave/onDrop: function (e,source){
   //source 参数获取DOM元素
 }

  Droppable 方法列表

  1,options 返回属性对象

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

  2,enable,disable 和上面属性的功能是一样的 分别是启用和禁止放置

$('#box').droppable('enable/disable')

给大家展示下官方的示例吧

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Accept a Drop - 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>
</head>
<body>
 <div style="margin:20px 0;"></div>
 <div id="source" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;">
  drag me!
  <div id="d1" class="drag">Drag 1</div>
  <div id="d2" class="drag">Drag 2</div>
  <div id="d3" class="drag">Drag 3</div>
 </div> 
 <div id="target" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;">
  drop here!
 </div>
 <div style="clear:both"></div>
 <style type="text/css">
  .drag{
   width:100px;
   height:50px;
   padding:10px;
   margin:5px;
   border:1px solid #ccc;
   background:#AACCFF;
  }
  .dp{
   opacity:0.5;
   filter:alpha(opacity=50);
  }
  .over{
   background:#FBEC88;
  }
 </style>
 <script>
  /**
  使用js方式将元素设置为可draggable的
  */
  $(function(){
   $('.drag').draggable({
    proxy:'clone',
    revert:true,
    cursor:'pointer',
    onStartDrag:function(){
     $(this).draggable('options').cursor='not-allowed';//设置鼠标样式为不可拖动
     $(this).draggable('proxy').addClass('dp');//设置样式
    },
    onStopDrag:function(){
     $(this).draggable('options').cursor='auto';//设置鼠标
    }
   });
   //将容易置为droppable并且可接受元素
   $('#target').droppable({
    accept:'#d1,#d3',
    onDragEnter:function(e,source){//拖入
     $(source).draggable('options').cursor='auto';
     $(source).draggable('proxy').css('border','1px solid red');
     $(this).addClass('over');
    },
    onDragLeave:function(e,source){//脱离
     $(source).draggable('options').cursor='not-allowed';
     $(source).draggable('proxy').css('border','1px solid #ccc');
     $(this).removeClass('over');
    },
    onDrop:function(e,source){//放下
     $(this).append(source)
     $(this).removeClass('over');
     alert("我被放下了");
    } ,
    //onDropOver当元素被拖出(成功放入到某个容器)的时候触发
    onDragOver:function(e,source){
      alert("我被拖出去了");//先于alert("我被放下了");执行,表明其触发在onDrop之前。
   }
   });
  });
 </script>
 
</body>
</html>

运行效果图这里就不给出了,官网直接就可以查看。OVER!

效果地址: http://www.jeasyui.com/demo/main/index.php?plugin=Droppable&theme=default&dir=ltr&pitem=

easyui 1.3.5 Droppable 就此完结。

jQuery满意度星级评价插件特效代码分享
这是一款基于jQuery的星级评分效果实例,鼠标滑过星星区域显示评论信息提交内容,适用在评论表单里面,是表单美化提交内容的一种用户体验设计。

easyui Draggable组件实现拖动效果
easyui做为一个封装了JQusey的UI插件,其实还是蛮好用的,至少省了像我这种渣渣很多时间。Draggable的加载方式有两种:1,通过class加载,如下:divid="box"c

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

本周排行

更新排行

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