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);

View Code

示例代码

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

View Code

插件效果

转载于:https://www.cnblogs.com/DemoLee/p/3500229.html

easyui源码翻译1.32--Droppable（放置）相关推荐

easyui源码翻译1.32--Messager（消息窗口）
前言使用$.messager.defaults重写默认值对象.下载该插件翻译源码消息窗口提供了不同的消息框风格,包含alert(警告框), confirm(确认框), prompt(提示框), p ...
easyui源码翻译1.32--ValidateBox（验证框）
前言使用$.fn.validatebox.defaults重写默认值对象.下载该插件翻译源码 validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将 ...
easyui源码翻译1.32--panel(面板)
前言昨天发布了表格datagrid的翻译源码 ,easyui的许多插件有依赖关系比如datagrid 的渲染需要panel.resizable.linkbutton.pagination 今 ...
easyui源码翻译1.32--SearchBox（搜索框）
前言使用$.fn.searchbox.defaults重写默认值对象.下载该插件翻译源码搜索框提示用户需要输入搜索的值.它可以结合一个菜单,允许用户选择不同的搜索类别.在用户按下回车键或点击组件右 ...
easyui源码翻译1.32--Window（窗口）
前言扩展自$.fn.panel.defaults.使用$.fn.window.defaults重写默认值对象.下载该插件翻译源码窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口.默认情况下,窗 ...
easyui源码翻译1.32--Resizable（调整大小）
前言使用$.fn.resizable.defaults重写默认值对象下载该插件翻译源码源码 /*** jQuery EasyUI 1.3.2* *翻译:qq 1364386878 Resizab ...
ArrayList源码翻译
ArrayList源码翻译简介属性解读初始化添加方法 get方法 set方法 remove方法 contains方法 clone方法总结简介 ArrayList 是 java 集合框架中比 ...
three.js源码翻译及案例(五)-GLTFLoader.js
写在前面 Three中的加载脚本很多,但是核心思想是差不多的,就是文件用文件解析器加载,图片用图片解析器加载,然后json转换为对象,但是由于gltf格式可以自己编辑所以有的源码参考意义不大,glb及 ...
jQuery Easyui 源码分析之combo组件
/** * jQuery EasyUI 1.3.1 * 该源码完全由压缩码翻译而来,并非网络上放出的源码,请勿索要.*/ (function($) {function setSize(target, ...
Vue源码翻译之渲染逻辑链
本篇文章主要要记录说明的是,Vue在Vdom的创建上的相关细节.这也是描绘了Vue在界面的创建上的一个逻辑顺序,同时我也非常拜服作者编码的逻辑性,当然或许这么庞大复杂的编码不是一次性铸就的,我想应该也 ...

easyui源码翻译1.32--Droppable（放置）

前言

源码

示例代码

插件效果

easyui源码翻译1.32--Droppable（放置）相关推荐

最新文章

热门文章