当前位置: 首页 > 软件库 > 大数据 > 可视化 >

DooringX

可视化拖拽框架
授权协议 MIT
开发语言 JavaScript TypeScript
所属分类 大数据、 可视化
软件类型 开源软件
地区 国产
投 递 者 周翰
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

dooringx-lib 是 dooringx 的基座,是移除了 dooringx 插件的可视化拖拽框架。

dooringx-lib 提供自己的一套数据流事件机制以及弹窗等解决方案,可以让你更快地自己定制开发可视化拖拽平台。

dooringx-lib 在运行时维护一套数据流,主要分为json数据部分,左侧组件部分,右侧配置项部分,快捷键部分,弹窗部分,事件与函数部分,数据源部分。

其除了提供基础的拖拽、移动、缩放、全选、旋转等功能外,还可以使用暴露的组件。如果觉得组件不够定制化,可以调整样式或者自己重新写。

文档

DooringX官方文档.

二次开发安装

npm/yarn  install dooringx-lib

项目上手

# 克隆项目
# cnpmjs
git clone https://github.com.cnpmjs.org/H5-Dooring/dooringx.git

# or
git clone https://github.com/H5-Dooring/dooringx.git


# 进入项目目录
cd dooringx

# 安装依赖
yarn install

# 启动 dooringx-lib
yarn start

# 启动基础示例
yarn start:example

# 启动 dooringx doc 文档
yarn start:doc

�� 贡献

欢迎参与贡献,提出问题、新功能合并请求等!

最新的贡献情况可以参阅 GitHub 提供的贡献入口页面

✂️ 快照

dooringX可视化搭建框架

 

 

 

 

  • 前言 Dooringx目前到了0.15.1,后面对于大的改造应该比较少了,可以基于此研发自己的H5搭建平台。 快速上手 首先创建个文件夹,例如dooringx-example。 我们推荐使用Umi脚手架快速搭建我们的项目。 在文件夹内使用命令yarn create @umijs/umi-app 或 npx @umijs/create-umi-app 安装dooringx-lib: yarn add

  • 前言 之前使用animate.css直接套到类名上进行制作动画,现在发现和别的竞品比动画这块有些差距。于是对动画重构。 实际上也是玩配置,但是首先要一个元素可以支持多个动画。而支持多个动画也很简单,只要animate里按逗号分割即可。但是还是需要梳理下动画的几个属性,再将属性变成常人易于理解的文字与操作。 动画属性 animation-name 这个是动画的动画名,逗号分割多的没啥说,对应名称 类

 相关资料
  • 在GUI里,拖放是指用户点击一个虚拟的对象,拖动,然后放置到另外一个对象上面的动作。一般情况下,需要调用很多动作和方法,创建很多变量。 拖放能让用户很直观的操作很复杂的逻辑。 一般情况下,我们可以拖放两种东西:数据和图形界面。把一个图像从一个应用拖放到另外一个应用上的实质是操作二进制数据。把一个表格从Firefox上拖放到另外一个位置 的实质是操作一个图形组。 简单的拖放 本例使用了QLineEd

  • 在 GUI 里,拖放是指用户点击一个虚拟的对象,拖动,然后放置到另外一个对象上面的动作。一般情况下,需要调用很多动作和方法,创建很多变量。 拖放能让用户很直观的操作很复杂的逻辑。 一般情况下,我们可以拖放两种东西:数据和图形界面。把一个图像从一个应用拖放到另外一个应用上的实质是操作二进制数据。把一个表格从 Firefox 上拖放到另外一个位置 的实质是操作一个图形组。 简单的拖放 本例使用了 QL

  • 拖放(DnD)是强大的用户界面概念,可以通过鼠标点击轻松复制,重新排序和删除项目。 这允许用户在元素上单击并按住鼠标按钮,将其拖动到另一个位置,然后释放鼠标按钮以将元素放在那里。 要使用传统的HTML4实现拖放功能,开发人员要么必须使用复杂的JavaScript编程,要么使用其他JavaScript框架,如jQuery等。 现在,HTML 5提出了一个拖放(DnD)API,它为浏览器提供了本机Dn

  • 拖拽效果,和调整窗口大小其实差不多,首先我们来看一张图。 黑色的小圆点,是我们鼠标单击的点。 红线的距离,可以通过e.pageX获得。 蓝线的距离,可以通过可以移动的这个Div盒子的 offsetLeft拿到。 此时我们就可以拿到,黄线的长度,当鼠标,也就是小圆点往右移动的时候,黄线是不会变的,而红线会变长,我们再次通过e.pageX拿到这个红线的长,我们通过红线的长度,减去不变的黄线的长度,得到

  • 本文向大家介绍Android实现悬浮可拖拽的Button,包括了Android实现悬浮可拖拽的Button的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Android实现悬浮可拖拽Button的具体代码,供大家参考,具体内容如下 1、简介 最近,因为项目需要,需要制作一个界面上可拖拽的按钮,网上也有多实例,看了下大部分都是示例不全或讲解不清晰,效果图也不明显,借此自己记录一番自己的

  • pre { white-space: pre-wrap; } jQuery EasyUI 插件 通过 $.fn.draggable.defaults 重写默认的 defaults。 用法 通过标记创建可拖动(draggable)元素。 <div id="dd" data-options="handle:'#title'"> <div id="title">title</div> </di