06 jQuery EasyUI 之Droppable可放置

使用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 确定将被接受的可拖动元素

事件:

Name Parameters Description
onDragEnter e,source 可拖动元素被拖进来触发
onDragOver e,source 可拖动元素被拖过时触发
onDragLeave e,source 可拖动元素被拖离开时触发
onDrop e,source 可拖动元素被拖放下触发
时间: 2024-10-06 00:39:08

06 jQuery EasyUI 之Droppable可放置的相关文章

Jquery easyUi Droppable(放置)组件

生活就是不断的让自己活下去,而我们如何活下去,就是靠不断的完善自己.所以今天我们来看看Jquery easyUi的Droppable(放置)组件. 一.加载方式 在使用放置组件时,有一个前提条件,那就是需要有一个可以拖拽的元素,不然我们的放置组件将毫无意义.所以我们这里默认有一个ID为"bb"的元素是设置了课拖拽的. 1.css样式加载方式 <div id="box" class="easyui-droppable" data-option

jQuery Easy UI Droppable(放置)组件

Droppable(放置)组件也是一个基本组件,用法较简单,语法都在例子里面注释了: 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="easyui/jquery.min.js&qu

EasyUI Droppable 可放置

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <ti

雷林鹏分享:jQuery EasyUI 拖放 - 基本的拖动和放置

jQuery EasyUI 拖放 - 基本的拖动和放置 本教程向您展示如何使 HTML 元素可拖动,在本例中,我们将创建三个 DIV 元素然后启用他们的拖动和放置. 首先,我们创建三个 元素: 对于第一个 元素,我们通过默认值让其可以拖动. $('#dd1').draggable(); 对于第二个 元素,我们通过创建一个克隆(clone)了原来元素的代理(proxy)让其可以拖动. $('#dd2').draggable({ proxy:'clone' }); 对于第三个 元素,我们通过创建自定

Jquery easyui 源代码分析之easyloader

Jquery easyui是一个javascript UI 组件库,使用它可以快速开发企业级的业务系统.如果你正准备开发系统后台,可以选择jquery easyui,也可以选择Ext JS.我个人的看法是,如果开发团队就两三个人,开发工期很短,就一两个月.那么选择jquery easyui就对了,jquery easyui源代码量不多,便于阅读和自行修改.而Ext JSy源代码太多,短时间很难看完,学习曲线也比较陡峭.如果人手充足,时间也富裕,可以考虑使用Ext JS来开发,毕竟Ext JS更强

jQuery EasyUI使用教程之创建一个拖放的购物车

<jQuery EasyUI最新版下载> 如果你能利用你的web应用程序很容易地实现简单的拖放,那么你一定知道一些特别的东西,使用jQuery EasyUI,我们能在web应用程序中简单地实现拖放功能. 在本教程中,我们将为你展示如何创建一个用户可以拖放他们想要购买的商品到购物车的页面.购物车中的物品和价格将会更新. 查看演示 在页面上显示商品: < ul class = "products" > < li > < a href = "

雷林鹏分享:jQuery EasyUI 拖放 - 创建拖放的购物车

jQuery EasyUI 拖放 - 创建拖放的购物车 如果您能够通过您的 Web 应用简单地实现拖动和放置,您就会知道一些特别的东西.通过 jQuery EasyUI,我们在 Web 应用中可以简单地实现拖放功能. 在本教程中,我们将向您展示如何创建一个启用用户拖动和放置用户想买的商品的购物车页面.购物篮中的物品和价格将更新. 显示页面上的商品 Balloon Price:$25 Feeling Price:$25 正如您所看到的上面的代码,我们添加一个包含一些 元素的 元素来显示商品.所有商

套用JQuery EasyUI列表显示数据、分页、查询

声明,本博客从csdn搬到cnblogs博客园了,以前的csdn不再更新,朋友们可以到这儿来找我的文章,更多的文章会发表,谢谢关注! 有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近看到一款轻型的UI感觉不错,但是在网上找了好多教程,但是没有一个是完全是C#asp.net写的 无耐下,自己写了下,感觉效果不错,故拿出来和大学分享一下,希望可以抛砖引玉作用. 由于好多人都只是拷贝代码,故在此全用图片作说明. 图片效果图1 这个界面是上左右下结构 左边是一棵树 右边是一个表格 上部

jquery+easyui主界面布局一例

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="workbench.aspx.cs" Inherits="WebApp.workbench" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <me