06 jQuery EasyUI 之Droppable可放置

简介:

使用Draggable元素需要拖动到指定的元素,那这儿需要使用到Droppable可放置插件

Droppable可放置有2种实现方式:

第一种 通过标记实现Droppable可放置区域

1
2
3
4
< div  class = "easyui-droppable"  data-options = "accept:'#d1,#d2'"  style = "width:100px;height:100px;" ></ div >
< div  id = "d1" ></ div >
< div  id = "d2" ></ div >
< div  id = "d3" ></ div >

class="easyui-droppable" 指定可放置区域    data-options="accept:'#d1,#d2'"  能被放置的模块:d1和d2可以  d3不能放到这个区域


第二种 通过javascript实现Droppable可放置区域

先定义一个div

1
< div  id = "dd"  style = "width:100px;height:100px;" ></ div >

在使用javascript创建

1
2
3
4
$('#dd').droppable({   
      accept:'#d1,#d2',
      disabled:true//设置为true 停止可拖放
});

accept 确定将被接受的可拖动元素


事件:

Name Parameters Description
onDragEnter e,source 可拖动元素被拖进来触发
onDragOver e,source 可拖动元素被拖过时触发
onDragLeave e,source 可拖动元素被拖离开时触发
onDrop e,source 可拖动元素被拖放下触发






本文转自 l363130002 51CTO博客,原文链接:http://blog.51cto.com/liuyj/1590862


相关文章
|
1月前
|
JavaScript 前端开发 搜索推荐
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
|
JavaScript 测试技术
Easyui 修改jquery validatebox为英文校验提示为中文提示
Easyui 修改jquery validatebox为英文校验提示为中文提示
85 0
|
JavaScript NoSQL 前端开发
常用网络js链接大全(jQuery、bootstrap、vue、ECharts、easyUI、React、maven、Mybatis、Spring、SpringMVC、Redis)(3)
常用网络js链接大全(jQuery、bootstrap、vue、ECharts、easyUI、React、maven、Mybatis、Spring、SpringMVC、Redis)
141 0
常用网络js链接大全(jQuery、bootstrap、vue、ECharts、easyUI、React、maven、Mybatis、Spring、SpringMVC、Redis)(3)
|
JavaScript 前端开发 NoSQL
常用网络js链接大全(jQuery、bootstrap、vue、ECharts、easyUI、React、maven、Mybatis、Spring、SpringMVC、Redis)(2)
常用网络js链接大全(jQuery、bootstrap、vue、ECharts、easyUI、React、maven、Mybatis、Spring、SpringMVC、Redis)
129 0
|
JavaScript 前端开发 NoSQL
常用网络js链接大全(jQuery、bootstrap、vue、ECharts、easyUI、React、maven、Mybatis、Spring、SpringMVC、Redis)(1)
常用网络js链接大全(jQuery、bootstrap、vue、ECharts、easyUI、React、maven、Mybatis、Spring、SpringMVC、Redis)
126 0
|
前端开发 JavaScript 数据安全/隐私保护
jQuery EasyUI简明教程
1. 背景 EasyUI虽然样式比较固定,但是功能比较全面,而且入门比较简单,适合刚刚学习前端的童鞋们,此处拿出来讲讲如何使用EasyUI。
141 0
|
JavaScript 前端开发 开发者
【原】jQuery easyUI 快速搭建前端框架
jQueryEasyUI jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。
1790 0
fbh
|
JavaScript
基于Jquery easyui 选中特定的tab并更新
原文:http://www.cnblogs.com/bohanfu/p/5802138.html  获取选中的 Tab // 获取选中的 tab panel 和它的 tab 对象 var pp = $('#tt').tabs('getSelected'); var tab = pp.panel('options').tab; // 相应的 tab 对象 更新特定的选项卡面板 可使用update方法,param参数包含2个属性: tab: 将被更新的选项卡。
fbh
1058 0
|
JavaScript 前端开发 .NET
使用Jquery+EasyUI 进行框架项目开发案例讲解之四--组织机构管理源码分享
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chinahuyong/article/details/14102147 使用J...
1123 0
|
前端开发 JavaScript .NET
使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chinahuyong/article/details/12616775 使用J...
984 0

相关课程

更多