draggleble
v1.0.7
Published
***效果图*** ![draggleble](https://github.com/song111/font-end-question/blob/master/image/draggleble/draggleble.gif)
Downloads
3
Readme
Draggleble.js
效果图
a simple draggleble layout
使用 Draggleble
sudo npm install draggleble --save
功能列表
- 组件的添加删除
- 组件选中和取消
- 组件的右键事件
- 组件拖拽和拉伸
Draggleble 用法
初始化画布
import Draggle from 'draggleble'
// 传入组件id,宽高和位置信息
const widgets = {
'12345678': {
id: "12345678",
left: 50,
top: 50,
width: 100,
height: 100,
content: `<b>组件1</b>`
}
};
// 初始化画布
const el = document.queryselector('#wrap');
window.draagle = this.draagle = new Draggle(el, {
widgets: widgets,
widget_selector: ".dragger",
resizeable: {
handle: ".resize-handle",
onStart: (id, size) => {
console.log(id, size, 'resize start');
},
onResize: (id, size) => {
console.log(id, size, 'resizing');
},
onStop: (id, size) => {
console.log(id, size, 'resize end');
},
},
draggable: {
onStart: (id, pos) => {
console.log(id, pos, 'move start');
},
onDrag: (id, pos) => {
console.log(id, pos, 'moving');
},
onStop: (id, pos) => {
console.log(id, pos, 'move end');
}
},
click: {
rightClick: (id) => {
console.log("右击", id)
},
selectedClick: (id, player) => {
console.log(id, player)
}
}
});
添加/删除组件
// 添加组件
addWidget() {
this.draagle.addWidget(
{
id: id,
left: 50,
top: 50,
width: 100,
height: 100,
content: `<b>组件1</b>`
}
);
}
// 删除组件
deleteWidget() {
let id = this.draagle.selectedId
this.draagle.removeWidegt(id)
}
获取组件信息
// 获取全部组件信息
const widgets=this.draagle.widgets
// 获取单个组件信息
const widget=this.draagle.widgets[id]
注意:example 里面的 draggleble.js 包含了 jquery 打包的代码,假如需要纯 draggleble.js 代码,需要自己配置 webpack 代码分块打包,假如有类似需求可以自行修改源码。