EasyUI基础入门之Droppable(可投掷)

怎么说呢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=

独立网站:点击打开链接

时间: 2024-11-08 11:12:58

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

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

前言 JQuery EasyUI提供的组件包括功能强大的DataGrid,TreeGrid.面板.下拉组合等.用户可以组合使用这些组件,也可以单独使用其中一个.(使用的形式是以插件的方式提供的) EasyUI体系结构 EasyUI所有的插件主要分为六大部分.Base基础.Layout布局.Menu&Button.Form表单.Window窗口等.从最基础的开始先掌握EasyUI基础部分.Base部分包含了八个基础插件分别为: parser(解析器) easyloader(加载器) draggab

EasyUI基础入门之searchbox&amp;progressbar(搜索框和进度条)

easyui基础部分的学习(八大部分)只剩下searchbox和pargressbar.tooltip了,有点小激动呢.本偏文章将对searchbox和pargressbar做一个学习.鉴于两者的内容都不会太多,这里就直接将之合并在一起啦! searchbox 不用过多解释,只要用于用户对数据的搜索.使用$.fn.searchbox.defaults重载默认值. 依赖组件:菜单按钮. searchbox提示用户输入搜索值.它可以设定一个类别菜单,允许用户选择不同的搜索类别.当用户点击确认按钮时将

EasyUI基础入门之Pagination(分页)

前言 对于一些企业级的应用来说(非站点),页面上最为基本的内容也就是表格和form了.对于类似于ERP这类系统来说数据记录比較大,前端表格展示的时候必需得实现分页功能了.恰巧EasyUI就提供了分页组件Pagination pagination覆盖默认$.fn.pagination.defaults.Pagination分页同意用户通过分页的方式来浏览数据,它支持可配置的选项,页面导航和页面长度的选择,并且用户能够加入?分页的右边定制button来增强分页功能. 只是pagination是依赖于

EasyUI基础入门之Easyloader(加载器)

在了解完easyui的parser(解析器)之后,接下来就是easyloader(简单加载器)的学习了. 什么是EasyLoader 正如其名字一样easyloader的作用是为了动态的加载组件所需的js文件,这体现了EasyUI作为轻量级框架对性能的合理掌握(可以动态的加载所需组件),不过一般而言很少使用到easyloader(会给使用者带来一定的难度).那么使用EasyLoader的场景有哪些呢? EasyLoader使用场景 出于性能的考虑,不一次性的加载easyui核心js.css文件,

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

在了解完easyui的parser(解析器)之后,接下来就是easyloader(简单载入器)的学习了. 什么是EasyLoader 正如其名字一样easyloader的作用是为了动态的载入组件所需的js文件,这体现了EasyUI作为轻量级框架对性能的合理掌握(能够动态的载入所需组件),只是一般而言非常少使用到easyloader(会给使用者带来一定的难度).那么使用EasyLoader的场景有哪些呢? EasyLoader使用场景 出于性能的考虑,不一次性的载入easyui核心js.css文件

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

easyui的base插件学习已经进行到Resizable(可缩放)了.照旧看看easyui官网的API. Resiable 正如其字面意思一样(可伸缩),resiable主要是将一些html元素扩展为可伸缩的,panel.window等,不信的话查阅easyui载入器源代码就能够知道啦!(window是依赖于resizable的)还是以官网的描写叙述来说. 覆盖默认$.fn.resizable.defaults. 属性 名称 类型 描写叙述信息 默认值 disabled boolean 假设为

Android基础入门教程——10.12 传感器专题(3)——加速度-陀螺仪传感器

Android基础入门教程--10.12 传感器专题(3)--加速度/陀螺仪传感器 标签(空格分隔): Android基础入门教程 本节引言: 本节继续来扣Android中的传感器,本节带来的是加速度传感器(Accelerometer sensor)以及 陀螺仪传感器(Gyroscope sensor),和上一节的方向传感器一样有着x,y,z 三个轴, 还是要说一点:x,y轴的坐标要和绘图那里的x,y轴区分开来!传感器的是以左下角 为原点的!x向右,y向上!好的,带着我们的套路来学本节的传感器吧

Android基础入门教程——8.1.3 Android中的13种Drawable小结 Part 3

Android基础入门教程--8.1.3 Android中的13种Drawable小结 Part 3 标签(空格分隔): Android基础入门教程 本节引言: 本节我们来把剩下的四种Drawable也学完,他们分别是: LayerDrawable,TransitionDrawable,LevelListDrawable和StateListDrawable, 依旧贴下13种Drawable的导图: 1.LayerDrawable 层图形对象,包含一个Drawable数组,然后按照数组对应的顺序来

Android基础入门教程——8.1.2 Android中的13种Drawable小结 Part 2

Android基础入门教程--8.1.2 Android中的13种Drawable小结 Part 2 标签(空格分隔): Android基础入门教程 本节引言: 本节我们继续来学习Android中的Drawable资源,上一节我们学习了: ColorDrawable:NinePatchDrawable: ShapeDrawable:GradientDrawable!这四个Drawable~ 而本节我们继续来学习接下来的五个Drawable,他们分别是: BitmapDrawable:Insert