# ide-dragdrop

> isomorphic web app.

Latest version **0.1.25** (published 2023-08-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install ide-dragdrop
pnpm add ide-dragdrop
yarn add ide-dragdrop
bun add ide-dragdrop
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.25 |
| Published | 2023-08-22 |
| First published | 2020-02-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 2.5 MB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | diozhu, whizbz |

## Links

- npm: https://www.npmjs.com/package/ide-dragdrop
- npm.io page: https://npm.io/package/ide-dragdrop

## Dependencies (3)

- [jquery](https://npm.io/package/jquery.md) 3.4.1
- [core-js](https://npm.io/package/core-js.md) ^3.19.1
- [ide-sdk-api](https://npm.io/package/ide-sdk-api.md) 0.1.12

## Recent versions

- 0.1.25 (latest) — 2023-08-22
- 0.1.24 — 2023-08-01
- 0.1.23 — 2023-07-14
- 0.1.22 — 2023-07-14
- 0.1.21 — 2023-07-14
- 0.1.14 — 2021-08-06
- 0.1.10 — 2021-03-24
- 0.1.5 — 2020-11-17
- 0.1.4 — 2020-10-31
- 0.1.3 — 2020-10-21
- 0.1.2 — 2020-10-19
- 0.1.1 — 2020-10-19
- 0.0.42 — 2020-09-09
- 0.0.33 — 2020-05-26
- 0.0.30 — 2020-04-24
- … 5 more at https://npm.io/package/ide-dragdrop/versions

## README

####设计器的拖拽能力
nid要保持唯一，对于tab等组件既存在头部又存在内容区的，内容区要在原有nid基础上增加_body,选中内容区返回的nid会将_body去掉。

```javascript
DND.init({
    dragShowBorder:true,//拖拽过程中是否显示目标边框和标题名
    
    //初始化完成后触发的事件
    onInitFinish:function(){},
    
    //当拖动开始时触发的事件
    onDragStart:function({
        event,   //事件对象
        dragtype,//拖拽类型create-创建、move-移动
        elem,      //为dom元素
        nid,     //为组件的nid值
        uiType   //为组件的uitype值
    }){},
    
    //当拖拽结束时触发的事件
    onDragEnd:function({
        event,
        dragtype,//拖拽类型create-创建、move-移动，当为false表示不允许放置
          selected: {//拖抓的目标
            elem,
            nid,
            uiType,
          },
          target: {//放置的目标
            elem,
            nid,
            uiType
          },
          position  //放置的位置
    }){},
    
    //当画布中组件元素被选中时触发的事件
    onChoose:function({
        event,
        elem,
        nid,
        uiType
    }){},
    
    //当点击删除按钮时触发的事件
    onDelete:function({
        event,
        elem,
        nid,
        uiType
    }){},
    /**
     * 自定义判断当前拖抓元素是否可放置在目标元素上
     * @return true，则允许放置
     * @return false，则不允许放置
     * @return undefined，则走默认判定
     */
    onCanDrop:function({
        isCan,//默认判定出的是否可放置的结果
        dragNid,//抓取目标的nid
        dragUiType,//抓取目标的uitype
        dragUiData:{//抓取目标的uidata
            isPart, //是否部件
            isExt,  //是否扩展组件
            source  //原始数据
        },
        targetNid,//放置目标的nid
        targetUiType,//放置目标的uitype
        targetUiParams,//放置目标的uiparams
        tplTree,//层次树数据
        initData//初始化的全局数据
    }){},
    /**
     *自定义判断当前拖抓元素进过目标元素时显示的可插入位置点 
     *@return true则表示显示上下插入点，false则显示左右插入点
     */
    onDropPosition:function({
        event,
        dragNid,//抓取目标的nid
        dragUiType,//抓取目标的uitype
        dragUiData:{//抓取目标的uidata
            isPart, //是否部件
            isExt,  //是否扩展组件
            source  //原始数据
        },
        targetElem,//放置目标的dom元素
        targetNid,//放置目标的nid
        targetUiType,//放置目标的uitype
        targetUiParams,//放置目标的uiparams
        tplTree,//层次树数据
        initData//初始化的全局数据
    }){},
    
    //自定义扩展按钮被点击时触发的事件
    onButtonClick:function({
        event,
        elem,
        nid,
        uiType,
        buttonKey,//自定义按钮的键值
    }){}
});


```
####特殊说明
1.需要支持拖拽能力的DOM元素必须生成nid、uitype属性，例如：
```html
<div nid="nid_1581070621610_1" uitype="button"></div>
```

2.由于拖拽默认会拦截所有点击事件，如需要在一些DOM元素上实现自定义点击，必须生成dndclickarrow属性，例如：
```html
<div dndclickarrow  click="javascript:function(){alert('自定义点击事件')}"></div>
```

---
_Source: https://npm.io/package/ide-dragdrop · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._