整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
純前端表格控件 SpreadJS，是市面上布局與功能都與 Excel 高度類似的一款表格控件，全中文操作界面，適用于.NET、Java、移動端等多個平臺的類 Excel 數據開發。
拖拽操作（Drag&Drop）是網頁應用中常見的一種快捷操作，那么如何在純前端表格控件 SpreadJS 中進行此類操作，本文就以一個簡單的示例來說明。
此示例演示將頁面中的元素(button)通過拖拽的方式，將按鈕的文字粘貼到 SpreadJS 單元格中。同時可以查看控制臺（console）了解事件過程。
核心代碼：
/* 松開鼠標，觸發 drop */
document.addEventListener("drop", function (event) {
// 阻止默認行為（drop的默認處理方式是當初鏈接處理）
event.preventDefault();
// 把拖拽元素移入目標區域
//這里要經過兩步處理
// 1、先把拖拽元素從原父元素中刪除（這步不是必須的）
///2、然后再添加到目標區域
if (event.target.className == "dropzone") {
event.target.style.background = "";
dragged.parentNode.removeChild(dragged);
event.target.appendChild(dragged);
}
//獲取拖動物理在屏幕的位置
var offsetL = document.getElementById("ss").offsetLeft;
var offsetT = document.getElementById("ss").offsetTop;
//獲取拖動塊的值
var tab_value = document.getElementById("item1").innerText
console.log(tab_value)
var x = event.pageX - offsetL;
var y = event.pageY - offsetT;
//獲取單元格的位置
var target = spread.hitTest(x, y);
console.log(target)
console.log("列： " + target.worksheetHitInfo.col + "行: " + target.worksheetHitInfo.row);
var sheet = spread.getActiveSheet();
sheet.setValue(target.worksheetHitInfo.row, target.worksheetHitInfo.col, tab_value);
console.log("執行完畢 ")
})
通過SpreadJS 提供的 hitTest方法，很容易找到與之交互的SpreadJS 內部對象，接下來就是通過API將button中的Text設置為單元格的 Value。
關于葡萄城
賦能開發者！葡萄城公司成立于 1980 年，是全球領先的集開發工具、商業智能解決方案、管理系統設計工具于一身的軟件和服務提供商。西安葡萄城是其在中國的分支機構，面向全球市場提供軟件研發服務，并為中國企業的信息化提供國際先進的開發工具、軟件和研發咨詢服務。葡萄城的控件和軟件產品在國內外屢獲殊榮，在全球被數十萬家企業、學校和政府機構廣泛應用。
次給大家分享一款受開發者青睞的Vue拖拽組件Vue.Draggable。
vuedraggable 基于 Sortable.js 的Vue拖放組件，star高達12.6K+。支持拖放和視圖模型數組同步，并提供 Sortable.js 的所有功能。
該作者開發的 Sortable.js，star 20.7K+。不依賴jQ，用于瀏覽器及移動設備自由拖拽排序，支持在 Vue、React及Angular 下使用。
https://github.com/SortableJS/SortableVue.Draggable實例應用
功能特性
安裝
$ npm i vuedraggable -S支持瀏覽器cdn引入使用
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>使用插件
<template>
<draggable v-model="myArray" @start="drag=true" @end="drag=false">
<transition-group>
<div v-for="element in myArray" :key="element.id">
{{element.name}}
</div>
</transition-group>
</draggable>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: {
draggable,
},
data(){
return {
myArray: []
}
},
}
</script>ghost-class 和 handle
ghost指的是在拖拽體原本位置占坑的那個元素。
ghost-class 就是給占坑的元素設置樣式。
<draggable ghost-class="ghost" >...</draggable>
<style scoped>
.ghost {
opacity: 0.5;
background: #c8ebfb;
}
</style>handle 就是拖拽的抓手，表示拖拽元素指定的可拖拽部分。
正常情況下拖拽元素整體是可拖拽，加了handle后，只有指定的地方可以拖拽，其它地方則不能進行拖拽。
<draggable tag="ul" :list="list" class="list-group" handle=".handle">
<li class="group-item" v-for="(element, idx) in list" :key="element.name" >
<i class="fa fa-align-justify handle"></i>
<span class="text">{{ element.name }} </span>
<input type="text" class="form-control" v-model="element.text" />
</li>
</draggable>最后附上示例及項目地址
# 示例地址
https://sortablejs.github.io/Vue.Draggable/
# 倉庫地址
https://github.com/SortableJS/Vue.Draggableok，就分享這么多。希望對大家有所幫助，感興趣的小伙伴可以去看下哈。
篇文章本來是為了Github starts突破2k 留的紀念，并沒有寫太多內容， 沒想到過了2天頭條開始推送，評論，點贊量很多，有點驚喜也有點意外啊！
vue-form-making 這個項目我們沒有做什么推廣，從2018年開始每天幾個星星慢慢積累起來了2000個， 能得到大家支持與認可，我們還是非常的欣喜，我們這幾年的努力沒有白費。
在此叩謝。
以下是近期Github的流量圖:
Github Clone 數量比之前多了很多
Vistors 也是持續上漲中
雖然之前我們就上過一次Github Trending 榜單，但是還是不介意再上一次，哈哈。
好了言歸正傳，我來解釋下這個項目是做什么的，為什么這么受歡迎。
基于Vue 頁面設計器，只需用拖拽的方式就能設計并生成完整的html文件或是Vue組件，直接可用。
如果你是前端開發者
能減少大量的重復工作，常用組件從左邊組件庫拖拽即可，每個組件有不同的屬性，點擊設計器中的組件就可以在右邊配置各種屬性，各種布局控件能滿足大部分的復雜頁面的涉及需求。如果我們提供的這些組件還不能滿足您的需求，我們提供了自定義組件，您只需要在自定義區域寫自己代碼即可。
如果你是后端開發者
大量內置控件能滿足你的需求，css樣式也是內置了，如果沒有特別復雜的需求，不用寫任何前端代碼，只需要在設計器中拖動控件就能完成頁面設計，實時預覽頁面效果，數據生成JSON格式，你只需要關注后端開發，提供Resful 接口即可輕松實現前后端的交互。
如果你想搭建自己的一套設計器
您可以基于我們的源碼進行二次開發，我們提供源碼和文檔，助你快速搭建屬于自己的網站設計器。
設計器
組件庫
我們以新聞發布頁面為例子
第一步
如圖拖動控件到設計器中間，根據業務需要修改字段標識和標題兩個參數：
分類使用的是下拉框組件，需要設置參數，可以設置靜態參數和遠程參數:
設置為遠端數據，只需自己寫好和后端交互代碼，將數據交給頁面渲染
相關代碼
remoteFuncs: {
func_test (resolve) {
// 下拉選擇框 select_1566990949275
// 獲取到遠端數據后執行回調函數
// resolve(data)
// 模擬數據獲取
setTimeout(() => {
const options = [
{value: 'value1', label: 'label1'},
{value: 'value1', label: 'label1'},
{value: 'value1', label: 'label1'},
]
// 對象中 value、label 是設計器中配置的值和標簽
resolve(options)
}, 2000)
},
}
第二步
沒有第二步，直接預覽：
點擊預覽按鈕即可查看效果：
也可以插入數據測試：
點擊獲取數據即可得到剛才添加的數據：
以上新聞純屬扯淡，不用太當真，要不然真會甩出個大更新出來。
如果你覺得設計的頁面滿意了，點擊生產代碼：
直接保存成html 文件即可打開運行，是不是很簡單！
更多詳情和開發文檔請訪問下方鏈接
工具地址：
http://tools.xiaoyaoji.cn/form
GitHub地址：
https://github.com/GavinZhuLei/vue-form-making
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
