码迷,mamicode.com
首页 > Web开发 > 详细

06 jQuery EasyUI 之Droppable可放置

时间:2014-12-17 06:51:08      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:javascript   元素   

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

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

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

<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

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

在使用javascript创建

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

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


事件:

NameParametersDescription
onDragEntere,source可拖动元素被拖进来触发
onDragOvere,source可拖动元素被拖过时触发
onDragLeavee,source可拖动元素被拖离开时触发
onDrope,source可拖动元素被拖放下触发


本文出自 “老牛Java” 博客,请务必保留此出处http://liuyj.blog.51cto.com/2340749/1590862

06 jQuery EasyUI 之Droppable可放置

标签:javascript   元素   

原文地址:http://liuyj.blog.51cto.com/2340749/1590862

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!