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

所谓放置,就是将一个物体放入一个物体内,当然对于easyui来说触发各种效果是必不可少的,同时这个组件也不会依赖于其他组件。

  Droppable的加载方式

  1,class  加载   一直不太喜欢class方式的加载  浪费一个位置,代码一多还看着乱七八糟的。

1 <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  在被拖拽元素放入到放置区的时候触发

1 onDragEnter /onDragOver/onDragLeave/onDrop: function (e,source){
2     //source 参数获取DOM元素
3 }

  Droppable 方法列表

  1,options 返回属性对象

console.log($(‘#box‘).droppable(‘options‘));

  2,enable,disable 和上面属性的功能是一样的  分别是启用和禁止放置

$(‘#box‘).droppable(‘enable/disable‘)

easyui 1.3.5 Droppable 就此完结。

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

时间: 2024-10-11 11:01:57

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

jQuery Easy UI Droppable(放置)组件

Droppable(放置)组件也是一个基本组件,用法较简单,语法都在例子里面注释了: 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="easyui/jquery.min.js&qu

Jquery easyUi Droppable(放置)组件

生活就是不断的让自己活下去,而我们如何活下去,就是靠不断的完善自己.所以今天我们来看看Jquery easyUi的Droppable(放置)组件. 一.加载方式 在使用放置组件时,有一个前提条件,那就是需要有一个可以拖拽的元素,不然我们的放置组件将毫无意义.所以我们这里默认有一个ID为"bb"的元素是设置了课拖拽的. 1.css样式加载方式 <div id="box" class="easyui-droppable" data-option

droppable放置组件

Droppable 放置组件 所谓放置,就将一个事物入一个事物内触发各种效果,这个组件不依赖于其他组件.1.加载方式 //class 调用 <div id="dd" class="easyui-droppable" data-options="accept:#box,#pox" style="background:black;width:600px;height:400px;"> </div> //JS

第二百零九节,jQuery EasyUI,Pagination(分页)组件

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

第二百一十四节,jQuery EasyUI,Calendar(日历)组件

jQuery EasyUI,Calendar(日历)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Canlendar(日历)组件的使用方法,这个组件不依赖于其 他组件. 一.加载方式 class 加载方式 <div id="box" class="easyui-calendar" style="width:200px;height:200px;"></div>

第二百零六节,jQuery EasyUI,Menu(菜单)组件

jQuery EasyUI,Menu(菜单)组件 学习要点: 1.加载方式 2.菜单项属性 3.菜单属性 4.菜单事件 5.菜单方法 本节课重点了解 EasyUI 中 Menu(菜单)组件的使用方法,这个组件不依赖于任何其他 组件. 一.加载方式 菜单组件通常用于快捷菜单,在加载方式上,通过 class 或 JS 进行设置为菜单组件. 然后,再通过 JS 事件部分再响应. class 加载方式, <div id="box" class="easyui-menu"

第二百零四节,jQuery EasyUI,Dialog(对话框)组件

jQuery EasyUI,Dialog(对话框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解EasyUI中Dialog(窗口)组件的使用方法,这个组件依赖于Window(窗 口)组件.linkbutton (按钮)组件. 一.加载方式 class 加载方式 <div class="easyui-dialog" title="My Dialog" style="width:400px;height:200p

第二百零二节,jQuery EasyUI,Layout(布局)组件

jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个组件依赖于 Panel(面 板)组件和 resizable(调整大小)组件. 一.加载方式 class 加载方式,这个属性一般使用class方法使用 <body id="box" class="easyui-layout"> <div data-opt

第二百零三节,jQuery EasyUI,Window(窗口)组件

jQuery EasyUI,Window(窗口)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Window(窗口)组件的使用方法,这个组件依赖于 Panel(面 板)组件.resizable(调整大小)和 draggable(拖动)组件.这个组件扩展与 Panel 组件, 最大的优势就是调整大小和拖动以及内部布局. 一.加载方式 class 加载方式 <div id="box" class="easyui-w

第一百九十三节,jQuery EasyUI,Draggable(拖动)组件

Draggable(拖动)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Draggable(拖动)组件的使用方法,这个组件不依赖于其 他组件. 一.加载方式 //class 加载方式 <div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;"> 内容部分 &l