jQuery EasyUI，Droppable(放置)组件

 

学习要点：

　　1.加载方式

　　2.属性列表

　　3.事件列表

　　4.方法列表

 

本节课重点了解 EasyUI 中 Droppable(放置)组件的使用方法，所谓放置，就将一个 物体入某一个物体内触发各种效果，这个组件不依赖于其他组件。

 

一．加载方式

//class 加载方式
     

droppable()将一个元素设置成放置元素，放置元素就是将另外指定的元素放置进来触发事件

//JS 加载调用$('#box').droppable({　　accept:'#box,#pox',});

 

 

二．属性列表

accept selector 默认为 null，确定哪些元素被接受，值为要接收放置的元素id

/**
     
      放置
     
     
    
      
       内容部分
      
     
 **/$(function () {    $('#box').draggable({    //将box元素设置拖拽    });    $('#fzh').droppable({    //将fzh元素设置成放置        accept:'#box,#pox'   //确定哪些元素被接受，值为要接收放置的元素id    })});

 

disabled boolean 默认为 false，如果为 true，则禁止放置

 

/**
     
      放置
     
     
    
      
       内容部分
      
     
 **/$(function () {    $('#box').draggable({    //将box元素设置拖拽    });    $('#fzh').droppable({     //将fzh元素设置成放置        accept:'#box,#pox',   //确定哪些元素被接受，值为要接收放置的元素id        disabled:true         //如果为 true，则禁止放置    })});

 

 

 

三．事件列表

 

注意：以下事件 e接收的事件event对象，source接收的放置进来的元素对象

onDragEnter  e,source 在被拖拽元素到放置区内的时候触发，只触发一次

/**
     
      放置
     
     
    
      
       内容部分
      
     
 **/$(function () {    $('#box').draggable({    //将box元素设置拖拽    });    $('#fzh').droppable({     //将fzh元素设置成放置        accept: '#box,#pox',   //确定哪些元素被接受，值为要接收放置的元素id        onDragEnter: function (e, source) {       //在被拖拽元素到放置区内的时候触发，只触发一次            $(this).css('background', 'blue');        }    })});

 

onDragOver  e,source 在被拖拽元素经过放置区的时候触发

/**
     
      放置
     
     
    
      
       内容部分
      
     
 **/$(function () {    $('#box').draggable({    //将box元素设置拖拽    });    $('#fzh').droppable({     //将fzh元素设置成放置        accept: '#box,#pox',   //确定哪些元素被接受，值为要接收放置的元素id        onDragEnter: function (e, source) {       //在被拖拽元素经过放置区的时候触发，触发多次            $(this).css('background', 'blue');        }    })});

 

onDragLeave  e,source 在被拖拽元素离开放置区的时候触发

/**
     
      放置
     
     
    
      
       内容部分
      
     
 **/$(function () {    $('#box').draggable({    //将box元素设置拖拽    });    $('#fzh').droppable({     //将fzh元素设置成放置        accept: '#box,#pox',   //确定哪些元素被接受，值为要接收放置的元素id        onDragLeave: function (e, source) {       //在被拖拽元素离开放置区的时候触发，            $(this).css('background', 'blue');        }    })});

 

onDrop  e,source 在被拖拽元素放入到放置区的时候触发，也就是放下鼠标左键弹起时触发

 

/**
     
      放置
     
     
    
      
       内容部分
      
     
 **/$(function () {    $('#box').draggable({    //将box元素设置拖拽    });    $('#fzh').droppable({     //将fzh元素设置成放置        accept: '#box,#pox',   //确定哪些元素被接受，值为要接收放置的元素id        onDrop: function (e, source) {       //在被拖拽元素放入到放置区的时候触发，也就是放下鼠标左键弹起时触发            $(this).css('background', 'blue');        }    })});

 

 

 

 

四．方法列表

 

options  none 返回属性对象

/**
     
      放置
     
     
    
      
       内容部分
      
     
 **/$(function () {    $('#box').draggable({    //将box元素设置拖拽    });    $('#fzh').droppable({     //将fzh元素设置成放置        accept: '#box,#pox',   //确定哪些元素被接受，值为要接收放置的元素id        onDrop: function (e, source) {       //在被拖拽元素放入到放置区的时候触发，也就是放下鼠标左键弹起时触发            $(this).css('background', 'blue');        }    });    var p = $('#fzh').droppable('options');   //options  none 返回属性对象    $.each(p, function (attr, value) {        //遍历属性对象        alert(attr + ':' + value);    });});

 

enable  none 启用放置功能

/**
     
      放置
     
     
    
      
       内容部分
      
     
 **/$(function () {    $('#box').draggable({    //将box元素设置拖拽    });    $('#fzh').droppable({     //将fzh元素设置成放置        accept: '#box,#pox',   //确定哪些元素被接受，值为要接收放置的元素id        onDrop: function (e, source) {       //在被拖拽元素放入到放置区的时候触发，也就是放下鼠标左键弹起时触发            $(this).css('background', 'blue');        }    });    $('#fzh').droppable('disable');  //disable  none    $('#fzh').droppable('enable');  //enable  none 启用放置功能});

 

disable  none 禁用放置功能

/**
     
      放置
     
     
    
      
       内容部分
      
     
 **/$(function () {    $('#box').draggable({    //将box元素设置拖拽    });    $('#fzh').droppable({     //将fzh元素设置成放置        accept: '#box,#pox',   //确定哪些元素被接受，值为要接收放置的元素id        onDrop: function (e, source) {       //在被拖拽元素放入到放置区的时候触发，也就是放下鼠标左键弹起时触发            $(this).css('background', 'blue');        }    });    $('#fzh').droppable('disable');  //disable  none 禁用放置功能});

 

$.fn.droppable.defaults 重写默认值对象。

$.fn.droppable.defaults.disabled = true;