淘先锋技术网

首页 1 2 3 4 5 6 7

jQuery EasyUI,Droppable(放置)组件

 

学习要点:

  1.加载方式

  2.属性列表

  3.事件列表

  4.方法列表

 

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

 

一.加载方式

//class 加载方式
<div id="dd"
    class="easyui-droppable"
    data-options="accept:'#box,#pox'"
    style="background:black;width:600px;height:400px;">
</div>

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

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

 

 

二.属性列表

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

/**
<div id="fzh">放置</div>

<div id="box">
    <div id="pox">内容部分</div>
</div>
 **/

$(function () {
    $('#box').draggable({    //将box元素设置拖拽

    });
    $('#fzh').droppable({    //将fzh元素设置成放置
        accept:'#box,#pox'   //确定哪些元素被接受,值为要接收放置的元素id
    })
});

 

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

 

/**
<div id="fzh">放置</div>

<div id="box">
    <div id="pox">内容部分</div>
</div>
 **/

$(function () {
    $('#box').draggable({    //将box元素设置拖拽

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

 

 

 

三.事件列表

 

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

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

/**
<div id="fzh">放置</div>

<div id="box">
    <div id="pox">内容部分</div>
</div>
 **/

$(function () {
    $('#box').draggable({    //将box元素设置拖拽

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

 


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

/**
<div id="fzh">放置</div>

<div id="box">
    <div id="pox">内容部分</div>
</div>
 **/

$(function () {
    $('#box').draggable({    //将box元素设置拖拽

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

 


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

/**
<div id="fzh">放置</div>

<div id="box">
    <div id="pox">内容部分</div>
</div>
 **/

$(function () {
    $('#box').draggable({    //将box元素设置拖拽

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

 


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

 

/**
<div id="fzh">放置</div>

<div id="box">
    <div id="pox">内容部分</div>
</div>
 **/

$(function () {
    $('#box').draggable({    //将box元素设置拖拽

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

 

 

 

 

四.方法列表

 

options  none 返回属性对象

/**
<div id="fzh">放置</div>

<div id="box">
    <div id="pox">内容部分</div>
</div>
 **/

$(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 启用放置功能

/**
<div id="fzh">放置</div>

<div id="box">
    <div id="pox">内容部分</div>
</div>
 **/

$(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 禁用放置功能

/**
<div id="fzh">放置</div>

<div id="box">
    <div id="pox">内容部分</div>
</div>
 **/

$(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;

 

转载于:https://www.cnblogs.com/adc8868/p/6636027.html