JQuery easyui (2)Droppable(放置)组件

时间:2022-06-08 17:38:13

所谓放置,就是将一个物体放入一个物体内,当然对于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')

easyui 1.3.5 Droppable 就此完结。

看PDF的时候觉得特别不对劲,原来是PDF错字了,真心坑 - -

JQuery easyui (2)Droppable(放置)组件的更多相关文章

  1. 第一百九十四节,jQuery EasyUI,Droppable&lpar;放置&rpar;组件

    jQuery EasyUI,Droppable(放置)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Droppable(放置)组件的使用方 ...

  2. jQuery Easy UI Droppable&lpar;放置&rpar;组件

    Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...

  3. droppable放置组件

    Droppable 放置组件 所谓放置,就将一个事物入一个事物内触发各种效果,这个组件不依赖于其他组件.1.加载方式 //class 调用 <div id="dd" clas ...

  4. 第二百二十六节,jQuery EasyUI,Tree&lpar;树&rpar;组件

    jQuery EasyUI,Tree(树)组件 本节课重点了解 EasyUI 中 Tree(树)组件的使用方法,这个组件依赖于 Draggable(拖 动)和 Droppable(放置)组件. 一.加 ...

  5. 求助关于jquery easyUI中的treegrid组件,请各位帮忙给个思路,谢谢啦

    现在项目中用到jquery easyUI中的treegrid组件,已经可以正常显示了.但是在保存的时候遇到问题,页面上参照官网的例子可以在页面更新,但是怎么获取编辑后的数据进而保存到数据库呢?

  6. 第二百二十三节,jQuery EasyUI,ComboBox&lpar;下拉列表框&rpar;组件

    jQuery EasyUI,ComboBox(下拉列表框)组件,可以远程加载数据的下拉列表组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 C ...

  7. 第二百一十六节,jQuery EasyUI,Spinner&lpar;微调&rpar;组件

    jQuery EasyUI,Spinner(微调)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Spinner(微调)组件的使用方法,这个 ...

  8. 第二百一十四节,jQuery EasyUI,Calendar&lpar;日历&rpar;组件

    jQuery EasyUI,Calendar(日历)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Canlendar(日历)组件的使用方法 ...

  9. 第二百零九节,jQuery EasyUI,Pagination&lpar;分页&rpar;组件

    jQuery EasyUI,Pagination(分页)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Pagination(分页)组件的使 ...

  10. 第二百零六节,jQuery EasyUI,Menu&lpar;菜单&rpar;组件

    jQuery EasyUI,Menu(菜单)组件 学习要点: 1.加载方式 2.菜单项属性 3.菜单属性 4.菜单事件 5.菜单方法 本节课重点了解 EasyUI 中 Menu(菜单)组件的使用方法, ...

随机推荐

  1. Permutation test&colon; p&comma; CI&comma; CI of P 置换检验相关统计量的计算

    For research purpose, I've read a lot materials on permutation test issue. Here is a summary. Should ...

  2. LeetCode 2 Add Two Numbers(链表操作)

    题目来源:https://leetcode.com/problems/add-two-numbers/ You are given two linked lists representing two ...

  3. 数往知来 AJAX Ajax增删改查&lt&semi;十九&gt&semi;

    =================================================客户端================================================ ...

  4. Android Studio导入GitHub上的项目常见问题&lpar;以图片轮播开源项目为实例&rpar;

    前言:github对开发者而言无疑是个宝藏,但想利用它可不是件简单的事,用Android studio导入开源项目会遇到各种问题,今天我就以github上的一个图片轮播项目为例,解决导入过程中的常见问 ...

  5. php简明学习笔记

    1.变量 <?php //变量声明(php变量无需单独创建,变量会在第一次赋值时创建) $a = 1; //弱类型(php变量会根据其值自动转换为相应的数据类型) $a = "a&qu ...

  6. python padas 学习

    import matplotlib from pandas import DataFrame import numpy as np import pandas as pd import MySQLdb ...

  7. 安装最新版的2016版Pycharm后,激活码

    2016年安装Pycharm后,过段时间过期.亲测只需要复制以下激活码可以完美解决激活问题,又可以开心的写Python了.以下为激活码内容: BIG3CLIK6F-eyJsaWNlbnNlSWQiOi ...

  8. 从前端的UI开始

    MVC分离的比较好,开发顺序没有特别要求,先开发哪一部分都可以,这次我们主要讲解前端UI的部分. ASP.NET MVC抛弃了WebForm的一些特有的习惯,例如服务器端控件,ViewState这些东 ...

  9. qt——c&plus;&plus;环境下qt编程,类的声明与构造

    在c++中创建项目时,会生成以项目名字命名的QMainWindow,以及相应的头文件和CPP文件,作为主要窗口: 在项目中继续生成qt类时,比如类的名称是test,会自动生成一个test.h的头文件, ...

  10. (一)github之基础概念篇

    1.github: 一项为开发者提供git仓库的托管服务, 开发者间共享代码的场所.github上公开的软件源代码全都由git进行管理. 2.git: 开发者将源代码存入名为git仓库的资料库中,而g ...