一、class加载方式

<div id="pop" class="easyui-droppable" style="width: 400px;height: 300px;background-color: powderblue"></div>

二、js加载方式

$("#pop").droppable({})

三、关于Droppable的属性、事件、方法

$("#pop").droppable({

//属性
      accept:"#box", //值为selector 确定哪些元素被接受 默认为 null
     disabled:true , //,如果为 true,则禁止放置 默认为 false
  //事件
     onDragOver:function (e,source) {$(this).css('background', 'blue')},// 在被拖拽元 素经过放置区的时候触发
     onDragEnter:function () {} , //在被拖拽元素到放置区内,左键未松开的时候触发
     onDragLeave : function (e, source) {}, 在被拖拽元素离开放置区的时候触发
     onDrop : function (e, source) {}在被拖拽元素放入到放置区的时候触发
});
//方法
    //返回属性对象 $('#box').droppable('options');
   //禁止放置 $('#box').draggable('disable');
  //启用放置 $('#box').draggable('enable');

四、可以使用重写默认值对象。​ $.fn.droppable.defaults.disabled = true;

*ps:一般和draggable配合使用

Droppable(放置组件)的更多相关文章

  1. jQuery Easy UI Droppable(放置)组件

    Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...

  2. droppable放置组件

    Droppable 放置组件 所谓放置,就将一个事物入一个事物内触发各种效果,这个组件不依赖于其他组件.1.加载方式 //class 调用 <div id="dd" clas ...

  3. 第一百九十四节,jQuery EasyUI,Droppable(放置)组件

    jQuery EasyUI,Droppable(放置)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Droppable(放置)组件的使用方 ...

  4. Droppable(放置)组件

    .加载方式 //class 加载方式 <div id="dd" class="easyui-droppable" data-options="a ...

  5. EasyUI系列学习(四)-Droppable(放置)

    一.创建组件 1.使用标签创建一个放置区 <div id="pox" class="easyui-droppable" style="width ...

  6. Tree( 树) 组件[4]

    本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件.一.方法列表 //部分方法onClick : funct ...

  7. Tree( 树) 组件[3]

    本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件.一. 事件列表很多事件的回调函数都包含'node'参数, ...

  8. Tree( 树) 组件[2]

    本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件.一. 异步加载如果想从数据库里获取导航内容, 那么就必须 ...

  9. Tree( 树) 组件[1]

    本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件. 一. 加载方式//class 加载方式<ul c ...

随机推荐

  1. 使用MyEclipse创建Servlet

    https://www.yiibai.com/servlet/creating-servlet-in-myeclipse-ide.html 如何在myeclipse IDE中创建Servlet? 要在 ...

  2. 六、实现一个小功能 todolist

    1.创建一个新的Compnent 如果是通过 cli 创建的会自动加入,如果是手动创建的,需要自己加入. 2.实现添加效果 3.实现删除按钮 4.优化,把点击 添加 改为 回车 添加 5.优化,分成“ ...

  3. JavaScript实例之计算器

    代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. vue之路由传参三种基本方式

    现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click= ...

  5. 人生苦短_我用Python_OS对目录/文件操作_005

    # coding=utf-8 import os # 操作文件和目录 ", os.getcwd()) # 获取当前文件的目录 ", os.path.realpath(__file_ ...

  6. 前端-使用template-web.js【模版引擎】渲染数据

    通过ajax请求到的数据,使用传统的拼接字符串也可以做到,但是‘ “ ” ‘这种模式,单引号.双引号容易 扩错,新手入门推荐使用这种,初入前端,需要一个一个敲代码体会一下. 使用 template.j ...

  7. spring依赖搜索

    spring项目在启动时,spring框架会根据名称自动搜索实现类. 这在日常开发中还是很有用的. 下面举两个例子. 1. 先写一个接口(或者抽象类) public interface IPerson ...

  8. session应用:

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8" ...

  9. SQLserver查询作业、视图、函数、存储过程中的关键字

    一.查询视图.函数.存储过程中的关键字 SELECT a.name,a.[type],b.[definition] FROM sys.all_objects a,sys.sql_modules b W ...

  10. 前端每日实战:46# 视频演示如何用纯 CSS 创作一个在容器中反弹的小球

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jKVbyE 可交互视频教程 此视频 ...