怎么说呢Droppable这个单词究竟是什么意思,准确来说easyui作者究竟要表达什么意思,还是不大好拿捏的。只是没关系,没有必要纠结与这些细枝末节的东西,依据官网的demo效果,就简单的将之定义为(可投掷)吧!

Droppable

droppable和draggable有类似的地方,只是差别点在于前者着重于将元素放进某个容器中,而后者则着重于可拖拽(尽管可能一些效果两者都能够实现)。

并且通过查看easyloader源代码可知道。droppable并不依赖于draggable。

Droppable覆盖默认值$.fn.droppable。

以下依据官网doc,看看其所具有的属性、事件、方法吧。

属性

droppable具有的属性不多,到眼下的easyui版本号仅仅有两个例如以下表:

名称 类型 描写叙述信息 默认值
accept selector 决定哪些课拖拽的元素能被接受 null
disable boolean 假设为true则停止投掷 false

事件

名称 參数 描写叙述信息
onDragEnter e,source 当拖拽元素被拖入的时候触发.source參数指明拖拽的DOM元素
onDragOver e,source 当拖拽元素被拖出(成功放入某个容器)的时候触发(且在onDrop之前触发).source參数指明拖拽的DOM元素
onDragLeave e,source 当拖拽元素被拖离的时候触发.source參数指明拖拽的DOM元素
onDrop e,source 当拖拽元素被放下的时候触发.source參数指明拖拽的DOM元素

方法

名称 參数 描写叙述信息
options none 返回options对象
enable none 可投掷
disable none 不可投掷

使用方式

和Draggable一样,Droppable相同有两种创建方式。

1、通过html标记创建:

<div class="easyui-droppable" data-options="accept:'#d1,#d3'" style="width:100px;height:100px;background:gray;">
</div>

2、通过js脚本创建:

<div class="easyui-droppable" id="dd" style="width:100px;height:100px;background:gray;">
</div>
<script>
$('#dd').droppable({
accept: '#d1,#d3'
});
</script>

Demo

easyui官方提供了关于Droppable的demo,地址这里就不给出了。直接看看官方给出一个样例吧:

<!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=

独立网站:

p=190" target="_blank">点击打开链接

EasyUI基础入门之Droppable(可投掷)的更多相关文章

  1. EasyUI基础入门之Parser(解析器)

    前言 JQuery EasyUI提供的组件包含功能强大的DataGrid,TreeGrid.面板.下拉组合等.用户能够组合使用这些组件,也能够单独使用当中一个.(使用的形式是以插件的方式提供的) Ea ...

  2. EasyUI基础入门之Easyloader(载入器)

    在了解完easyui的parser(解析器)之后,接下来就是easyloader(简单载入器)的学习了. 什么是EasyLoader 正如其名字一样easyloader的作用是为了动态的载入组件所需的 ...

  3. EasyUI基础入门之Pagination(分页)

    前言 对于一些企业级的应用来说(非站点),页面上最为基本的内容也就是表格和form了.对于类似于ERP这类系统来说数据记录比較大,前端表格展示的时候必需得实现分页功能了.恰巧EasyUI就提供了分页组 ...

  4. EasyUI基础入门之Resiable(可缩放)

    easyui的base插件学习已经进行到Resizable(可缩放)了.照旧看看easyui官网的API. Resiable 正如其字面意思一样(可伸缩),resiable主要是将一些html元素扩展 ...

  5. easyUI基础入门

    头部需要引人文件:<!DOCTYPE html><html><head> <meta charset="utf-8"> <ti ...

  6. jQuery UI 之 EasyUI 快速入门

    jQuery EasyUI 基础 转载自(http://www.shouce.ren/api/view/a/3350) jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面 ...

  7. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  8. 「译」JUnit 5 系列:基础入门

    原文地址:http://blog.codefx.org/libraries/junit-5-basics/ 原文日期:25, Feb, 2016 译文首发:Linesh 的博客:JUnit 5 系列: ...

  9. .NET正则表达式基础入门

    这是我第一次写的博客,个人觉得十分不容易.以前看别人写的博客文字十分流畅,到自己来写却发现十分困难,还是感谢那些为技术而奉献自己力量的人吧. 本教程编写之前,博主阅读了<正则指引>这本入门 ...

随机推荐

  1. 什么是WSDL

    WSDL定义 WSDL(Web Service Description Language) 指网络服务描述语言:是一种用来描述Web服务和说明Web服务通信的XML.WSDL用于描述WebServic ...

  2. Nginx+PHPSTORM+Xdebug 配置

    1. php Xdebug扩展 下载  https://xdebug.org/download.php 选择自己的版本下载,会得到一个dll文件 例如 php_xdebug-2.7.0alpha1-7 ...

  3. iOS学习笔记45-Swift(五)协议

    一.Swift协议 协议是为方法.属性等定义一套规范,没有具体的实现,类似于Java中的抽象接口,它只是描述了方法或属性的骨架,而不是实现.方法和属性实现还需要通过定义类,函数和枚举完成. 1. 协议 ...

  4. 【bzoj3252】攻略 贪心+DFS序+线段树

    题目描述 题目简述:树版[k取方格数] 众所周知,桂木桂马是攻略之神,开启攻略之神模式后,他可以同时攻略k部游戏. 今天他得到了一款新游戏<XX半岛>,这款游戏有n个场景(scene),某 ...

  5. kb-07线段树-03--区间修改查询--lazy思想

    /* 区间修改,区间查询和: 第一次使用lazy思想: poj3468 */ #include<iostream> #include<cstdio> #include<c ...

  6. hihoCoder #1117 战争年代

    题目大意 对一棵树的节点染色.初始时每个点都染成颜色 $0$,然后进行 $m$ 轮操作.第 $i$ 轮操作:从 $[0,d_i]$ 中随机选出一个整数 $d$,将距离点 $x_i$ 不超过 $d$ 的 ...

  7. 兼容ie8 rgba()写法

    background: rgba(255,255,255,.1); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#1 ...

  8. 喵星球上的点名(bzoj 2754)

    Description a180285幸运地被选做了地球到喵星球的留学生.他发现喵星人在上课前的点名现象非常有趣.   假设课堂上有N个喵星人,每个喵星人的名字由姓和名构成.喵星球上的老师会选择M个串 ...

  9. 标准C程序设计七---37

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  10. unity3d的模型规范

    1.不能存在单独的点和面,重复的面和点,不能被玩家所看到的模型也不必制作. 2.贴图要保证始终是2的倍数,但不必为正方形. 3.移动平台,如IP4,应该每个模型一般不超过300-1500个面,同屏不应 ...