在纯前端表格控件 SpreadJS 中进行拖拽（Drag&amp;Drop）的简单示例

言 | 问题背景

纯前端表格控件 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/Sortable

Vue.Draggable实例应用

功能特性

完全支持 Sortable.js 功能：
支持触摸设备
支持拖动手柄和可选文本
智能自动滚动支持
不同列表之间的拖放
没有 jQuery 依赖
保持同步HTML和视图模型列表
与 Vue.js 2.0 transition-group 兼容
支持取消
在需要完全控制时报告任何更改的事件
重用现有的 UI 库组件（例如 vuetify、element 或 vue 材料等）

安装

$ 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.Draggable

ok，就分享这么多。希望对大家有所帮助，感兴趣的小伙伴可以去看下哈。

篇文章本来是为了Github starts突破2k 留的纪念，并没有写太多内容，没想到过了2天头条开始推送，评论，点赞量很多，有点惊喜也有点意外啊！

vue-form-making 这个项目我们没有做什么推广，从2018年开始每天几个星星慢慢积累起来了2000个，能得到大家支持与认可，我们还是非常的欣喜，我们这几年的努力没有白费。

在此叩谢。

以下是近期Github的流量图:

Github Clone 数量比之前多了很多

Vistors 也是持续上涨中

虽然之前我们就上过一次Github Trending 榜单，但是还是不介意再上一次，哈哈。

好了言归正传，我来解释下这个项目是做什么的，为什么这么受欢迎。

这个项目是做什么的？

基于Vue 页面设计器，只需用拖拽的方式就能设计并生成完整的html文件或是Vue组件，直接可用。

如果你是前端开发者

能减少大量的重复工作，常用组件从左边组件库拖拽即可，每个组件有不同的属性，点击设计器中的组件就可以在右边配置各种属性，各种布局控件能满足大部分的复杂页面的涉及需求。如果我们提供的这些组件还不能满足您的需求，我们提供了自定义组件，您只需要在自定义区域写自己代码即可。

如果你是后端开发者

大量内置控件能满足你的需求，css样式也是内置了，如果没有特别复杂的需求，不用写任何前端代码，只需要在设计器中拖动控件就能完成页面设计，实时预览页面效果，数据生成JSON格式，你只需要关注后端开发，提供Resful 接口即可轻松实现前后端的交互。

如果你想搭建自己的一套设计器

您可以基于我们的源码进行二次开发，我们提供源码和文档，助你快速搭建属于自己的网站设计器。

项目截图

设计器

组件库

1分钟快速创建一个页面

我们以新闻发布页面为例子

第一步

如图拖动控件到设计器中间，根据业务需要修改字段标识和标题两个参数：

分类使用的是下拉框组件，需要设置参数，可以设置静态参数和远程参数:

设置为远端数据，只需自己写好和后端交互代码，将数据交给页面渲染

相关代码

remoteFuncs: {

func_test (resolve) {

// 下拉选择框 select_1566990949275

// 获取到远端数据后执行回调函数

// resolve(data)

// 模拟数据获取

setTimeout(() => {

const options = [

{value: 'value1', label: 'label1'},

]

// 对象中 value、label 是设计器中配置的值和标签

resolve(options)

}, 2000)

}

第二步

没有第二步，直接预览：

点击预览按钮即可查看效果：

也可以插入数据测试：

点击获取数据即可得到刚才添加的数据：

以上新闻纯属扯淡，不用太当真，要不然真会甩出个大更新出来。

如果你觉得设计的页面满意了，点击生产代码：

直接保存成html 文件即可打开运行，是不是很简单！

更多详情和开发文档请访问下方链接

工具地址：

http://tools.xiaoyaoji.cn/form

GitHub地址：

https://github.com/GavinZhuLei/vue-form-making

在线咨询

上一篇：网络推广公司手把手教你推广网站banner样式怎么写？详细文图教程
下一篇：HTML5的表格使用方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商