开发者社区> 科技小能手> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery EasyUI简明教程
1. 背景 EasyUI虽然样式比较固定,但是功能比较全面,而且入门比较简单,适合刚刚学习前端的童鞋们,此处拿出来讲讲如何使用EasyUI。
0 0
jQuery +easyUI 实现双击编辑
jQuery +easyUI 实现双击编辑 DataGrid 数据表里面需要加属性 editor:’text’ 才能实现 $(function(){ $('#dg').datagrid({ url:'.
1535 0
jQuery EasyUI 重写datagrid的datetimebox编辑类型
jQuery EasyUI 重写datagrid的datetimebox编辑类型
1416 0
【原】jQuery easyUI 快速搭建前端框架
jQueryEasyUI jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。
1241 0
文章
问答
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载