拖拽生成組件，大家react怎麼實現？

01-05

拖拽生成組件，大家react怎麼實現？

題主你說的是類似這種嗎？直接拖拽生成 React 代碼，原理嗎其實很簡單，就是把組件抽象出一種模式，然後定義一個中間的數據結構，通過事件和屬性組裝成可視化視圖，最終再反向生成 React 代碼。

可以用普通的div和span之類的原生組件，也可以用別的組件庫的現成組件，還可以自己自定義模板組件。

在線地址：Antd Editor

redux作者寫過一個

https://www.npmjs.com/package/react-dnd

react 拖拽庫。

文檔英文，例子詳實，不過使用有一定門檻，需要自己寫代碼，它只是提供了一個能力，而不是組件。

大家用庫之前一定要知道原理，原理很簡單的，就是拖拽時會觸發事件，具體是什麼怎麼用自己去查。

如果對實現有興趣推薦看看那個庫里redux作者寫的代碼，他寫的代碼特別棒

react-dnd, react-draggable, react-resizable, react-drag-select, react-rnd, react-grid-layout, react-resizable-box...

拿走不送！

有人點贊感興趣，我再加個超級大禮吧：https://github.com/ipselon/structor

前幾天PM給我提了這個需求，讓我拒了

拖拽組件一直是一個比較有趣的問題，在各種平台都有實現。

好就好在，我實現了一個，我用中文添加了不少注釋，方便閱讀

在線預覽demo：GitHub BitBucket HTML Preview (看不到多刷新幾次)
倉庫github地址：215566435/React-dragger-R（喜歡的話給點星星唄）

Npm下載

npm install --save react-dragger-r

簡單的使用

安裝之後直接使用&組件包裹原聲組件即可

import React from "react" import Dragger from "react-dragger-r" import ReactDOM from "react-dom"


class LayoutDemo extends React.Component {

    render() {

        return (

            &

                &

                    &普通的拖拽組件&
                &

            &
        )

    }

}

ReactDOM.render( & & &, document.getElementById("root") );

最後Api和文檔

README：215566435/React-dragger-R

新的輪子項目，希望大家喜歡，喜歡的給點星星，謝謝

如果只是做拖拽然後生成，應該並不困難（雖然沒有實際做過），判斷一下拖拽的位置和拖拽的組件類型，插入一個進去就行了。感覺麻煩點應該在對拖拽進去的組件進行自定義操作，比如通過滑鼠控制寬高，還有組合兩個組件的位置等等...這些應該才是麻煩所在。