easyui源码翻译1.32--Droppable（放置）
前言
使用$.fn.droppable.defaults重写默认值对象。下载该插件翻译源码
源码
/**
* jQuery EasyUI 1.3.2
*
*翻译：lbq --放置 拉伸
*/
(function ($) {
//初始化
function init(jq) {
$(jq).addClass("droppable");
$(jq).bind("_dragenter", function (e, source) {
$.data(jq, "droppable").options.onDragEnter.apply(jq, [e, source]);
});
$(jq).bind("_dragleave", function (e, source) {
$.data(jq, "droppable").options.onDragLeave.apply(jq, [e, source]);
});
$(jq).bind("_dragover", function (e, source) {
$.data(jq, "droppable").options.onDragOver.apply(jq, [e, source]);
});
$(jq).bind("_drop", function (e, source) {
$.data(jq, "droppable").options.onDrop.apply(jq, [e, source]);
});
};
//实例化插件
$.fn.droppable = function (options, parm) {
if (typeof options == "string") {
return $.fn.droppable.methods[options](this, parm);
}
options = options || {};
return this.each(function () {
var parm = $.data(this, "droppable");
if (parm) {
$.extend(parm.options, options);
} else {
init(this);
$.data(this, "droppable", { options: $.extend({}, $.fn.droppable.defaults, $.fn.droppable.parseOptions(this), options) });
}
});
};
//默认方法
$.fn.droppable.methods = {
//返回属性对象
options: function (jq) {
return $.data(jq[0], "droppable").options;
},
//启用放置功能
enable: function (jq) {
return jq.each(function () {
$(this).droppable({ disabled: false });
});
},
//禁用放置功能
disable: function (jq) {
return jq.each(function () {
$(this).droppable({ disabled: true });
});
}
};
//属性转换器
$.fn.droppable.parseOptions = function (target) {
var t = $(target);
return $.extend({}, $.parser.parseOptions(target, ["accept"]), { disabled: (t.attr("disabled") ? true : undefined) });
};
//默认属性、事件
$.fn.droppable.defaults = {
accept: null,//确定哪些可拖拽元素将被接受
disabled: false,//如果为true，则禁止放置
//在被拖拽元素到放置区内的时候触发，source参数表示被拖拽的DOM元素
onDragEnter: function (e, source) {
},
//在被拖拽元素经过放置区的时候触发，source参数表示被拖拽的DOM元素
onDragOver: function (e, _c) {
},
//在被拖拽元素离开放置区的时候触发，source参数表示被拖拽的DOM元素
onDragLeave: function (e, _d) {
},
//在被拖拽元素放入到放置区的时候触发，source参数表示被拖拽的DOM元素
onDrop: function (e, _e) {
}
};
})(jQuery);
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Droppable - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
<script src="../../plugins2/jquery.parser.js"></script>
<script src="../../plugins2/jquery.draggable.js"></script>
<script src="../../plugins2/jquery.droppable.js"></script>
</head>
<body>
<h2>Basic Droppable</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Drag the boxed on left to the target area on right.</div>
</div>
<div style="margin:10px 0;"></div>
<div style="float:left;width:200px;margin-right:20px;">
<div class="title">Source</div>
<div>
<div class="dragitem">Apple</div>
<div class="dragitem">Peach</div>
<div class="dragitem">Orange</div>
</div>
</div>
<div style="float:left;width:200px;">
<div class="title">Target</div>
<div class="easyui-droppable targetarea"
data-options="
accept: '.dragitem',
onDragEnter:function(e,source){
$(this).html('enter');
},
onDragLeave: function(e,source){
$(this).html('leave');
},
onDrop: function(e,source){
$(this).html($(source).html() + ' dropped');
}
">
</div>
</div>
<div style="clear:both"></div>
<style type="text/css">
.title{
margin-bottom:10px;
}
.dragitem{
border:1px solid #ccc;
width:50px;
height:50px;
margin-bottom:10px;
}
.targetarea{
border:1px solid red;
height:150px;
}
.proxy{
border:1px solid #ccc;
width:80px;
background:#fafafa;
}
</style>
<script>
$(function(){
$('.dragitem').draggable({
revert:true,
deltaX:10,
deltaY:10,
proxy:function(source){
var n = $('<div class="proxy"></div>');
n.html($(source).html()).appendTo('body');
return n;
}
});
});
</script>
</body>
</html>
插件效果
easyui源码翻译1.32--Droppable（放置）的更多相关文章
- easyui源码翻译1.32+API翻译全篇导航 (提供下载源码)
前言 EasyUI每个组件都会有 属性.方法.事件 属性 所有的属性都定义在jQuery.fn.{plugin}.defaults里面.例如,对话框属性定义在jQuery.fn.dialog.defa ...
- easyui源码翻译1.32--datagrid(数据表格)
前言 此前网上有easyui1.25的源码 应该算是比较老的版本 之后又经历了1.26 . 1.3. 1.31. 1.32 .1.33.1.34 1.33开始支持css3 算是又一个转折 但是 ...
- easyui源码翻译1.32--EasyLoader（简单加载）
前言 扩展自$.fn.datebox.defaults,使用$.fn.datetimebox.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3. ...
- easyui源码翻译1.32--Draggable（拖动）
前言 使用$.fn.draggable.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3.2 * *翻译:qq 1364386878 --拖动 ...
- easyui源码翻译1.32--ComboTree（树形下拉框）
前言 扩展自$.fn.combo.defaults和$.fn.tree.defaults.使用$.fn.combotree.defaults重写默认值对象.下载该插件翻译源码 树形下拉框结合选择控件和 ...
- easyui源码翻译1.32--Tree（树）
前言 使用$.fn.tree.defaults重写默认值对象.下载该插件翻译源码 树控件在web页面中一个将分层数据以树形结构进行显示.它提供用户展开.折叠.拖拽.编辑和异步加载等功能. 源码 /** ...
- easyui源码翻译1.32--Resizable（调整大小）
前言 使用$.fn.resizable.defaults重写默认值对象 下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3.2 * *翻译:qq 1364386878 Resiz ...
- easyui源码翻译1.32--Pagination（分页）
前言 使用$.fn.pagination.defaults重写默认值对象下载该插件翻译源码 该分页控件允许用户导航页面的数据.它支持页面导航和页面长度选择的选项设置.用户可以在分页控件上添加自定义按钮 ...
- easyui源码翻译1.32--SearchBox（搜索框）
前言 使用$.fn.searchbox.defaults重写默认值对象.下载该插件翻译源码 搜索框提示用户需要输入搜索的值.它可以结合一个菜单,允许用户选择不同的搜索类别.在用户按下回车键或点击组件右 ...
随机推荐
- SQL Server调优系列进阶篇 - 如何维护数据库索引
前言 上一篇我们研究了如何利用索引在数据库里面调优,简要的介绍了索引的原理,更重要的分析了如何选择索引以及索引的利弊项,有兴趣的可以点击查看. 本篇延续上一篇的内容,继续分析索引这块,侧重索引项的日常 ...
- C#集合之ArrayList
C#中之所以有集合这个东东,是因为数组的长度是固定的,而实际需求是,不确定未来这个“数组”的个数,故出现集合这个概念,因为集合的容量会随元素的增加曾倍数增长.C#中有2类常用集合:ArrayList, ...
- 查看Unix系统是32位还是64位
#getconf查看OS位数 以下经过测试了HP: getconf KERNEL_BITSLinux: getconf LONG_BITAIX: getconf KERNEL_BITMODE #AIX ...
- cocos2d-x实战 C++卷 学习笔记--第4章 win32平台下中文乱码问题
前言: 将GBK编码的字符串转为UTF-8编码.(通俗点说就是解决中文乱码问题) 简要介绍: 在Win32平台下通过 log 输出中文字符时,会出现中文乱码问题.同样的代码在 ios 和 Androi ...
- 【转】图解SQL的各种连接join
原帖地址:http://www.nowamagic.net/librarys/veda/detail/936 图解SQL的各种连接join 让你对SQL的连接一目了然 在 2011年12月22日 那天 ...
- mysql空间数据相关操作
建表语句: CREATE TABLE ts.points ( name ) NOT NULL, location POINT NOT NULL, description ) ); 添加记录如下: IN ...
- JavaScript中，按值传递与按地址（引用）传递。
JavaScript中,数字型,字符串,布尔型等基本类型,传递给变量时,传递方式为按值传递,这个很好理解,不做多解释. 而令人有所疑惑的,是数组,对象等引用类型传递给变量是,传递方式为按地址传递.此处 ...
- 一篇关于学C++的感想（拿来与大家分享）
学计算机的如果你有耐心看下去,我敢保证这绝对是一种收获 期待爱 大师提醒: 计算机专业不是学编程,而是懂得计算机的工作原理,以及和计算机相关的学科技术.一个高手不必懂得编程,coder是最底层的人物, ...
- Android_Chronometer计时器
最近做一个项目用到Handler 和Message ,开始时不是很明白,不了解其中的内部机制,所以开发起来有点难度,之后自己找了Android 时间服务 这一节的内容,总结了一点关于时间的知识,在这里 ...
- 排序算法TWO:快速排序QuickSort
import java.util.Random ; /** *快速排序思路:用到了分治法 * 一个数组A[0,n-1] 分解为三个部分,A[0,p - 1] , A[p] , A[p + 1, n-1 ...