请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

dexteryao 讲师达人认证 悬赏达人认证 SpreadJS 开发认证

超级版主

123

主题

8927

帖子

1万

积分

超级版主

Rank: 8Rank: 8

积分
13518

讲师达人悬赏达人元老葡萄SpreadJS 认证SpreadJS 高级认证微信认证勋章

dexteryao 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2021-10-28 09:46  /   查看:1617  /  回复:0
本帖最后由 dexteryao 于 2021-10-28 10:08 编辑

SpreadJS 提供了hitTest接口,可以获取指定坐标位置的元素信息,比如单元格的行列号。在线表格编辑器提供的拖拽向单元格设置绑定信息也是在响应drag事件时获取到松手时刻单元格信息,设置bindingPath。 下面Demo展示了具体实现方式。 主要代码
  1. spread.getHost().style.position = "relative"
  2. let dragElement = new DragElement("dragContent", spread)
复制代码
dragElement.js
  1. function DragElement(elementId, spread){
  2. this.element = document.getElementById(elementId);
  3. this.spread = spread;
  4. this._init();
  5. }
  6. DragElement.prototype._init = function(){
  7. if(this.element && this.spread){
  8. this.element.addEventListener("dragstart", (evt) => {
  9. if (evt.dataTransfer) {
  10. evt.dataTransfer.setData("text/plain", "Data")
  11. }
  12. this.spread.getHost().ondragover = (evt) => this._onDocumentMouseMove(evt);
  13. this.spread.getHost().ondrop = (evt) => this._onDocumentMouseUp(evt);
  14. // this.spread.getHost().addEventListener("dragover", this._onDocumentMouseMove.bind(this));
  15. // this.spread.getHost().addEventListener("drop", this._onDocumentMouseUp.bind(this));
  16. });
  17. this.element.addEventListener("dragend", (evt) => {
  18. this.spread.getHost().ondragover = undefined;
  19. this.spread.getHost().ondrop = undefined;
  20. // this.spread.getHost().removeEventListener("dragover", this._onDocumentMouseMove.bind(this));
  21. // this.spread.getHost().removeEventListener("drop", this._onDocumentMouseUp.bind(this));
  22. this._removeBlock();
  23. });
  24. }
  25. }
  26. DragElement.prototype._onDocumentMouseMove = function(evt){
  27. evt.preventDefault();
  28. let hitInfo = this._getHitTestInfo(evt);
  29. if (!hitInfo) {
  30. return;
  31. }
  32. if (hitInfo.row === undefined || hitInfo.col === undefined) {
  33. return;
  34. }
  35. if (isNaN(hitInfo.row) || isNaN(hitInfo.col)) {
  36. return;
  37. }
  38. evt.stopPropagation()
  39. if(hitInfo.rowViewportIndex !== 1 || hitInfo.colViewportIndex !== 1){
  40. return;
  41. }
  42. let activeSheet = this.spread.getActiveSheet();
  43. let rect = activeSheet.getCellRect(hitInfo.row, hitInfo.col);
  44. this._highlightBlock(rect);
  45. }
  46. DragElement.prototype._onDocumentMouseUp = function(evt){
  47. evt.preventDefault();
  48. let hitInfo = this._getHitTestInfo(evt);
  49. if (!hitInfo) {
  50. return;
  51. }
  52. if (hitInfo.row === undefined || hitInfo.col === undefined) {
  53. return;
  54. }
  55. if (isNaN(hitInfo.row) || isNaN(hitInfo.col)) {
  56. return;
  57. }
  58. evt.stopPropagation()
  59. if(hitInfo.rowViewportIndex !== 1 || hitInfo.colViewportIndex !== 1){
  60. return;
  61. }
  62. let activeSheet = this.spread.getActiveSheet();
  63. activeSheet.setValue(hitInfo.row, hitInfo.col, evt.dataTransfer.getData("text/plain"))
  64. }
  65. DragElement.prototype._highlightBlock = function(rect){
  66. if(!this.decoration){
  67. this.decoration = document.createElement("div");
  68. this.decoration.style.position = "absolute"
  69. this.decoration.style.border = "1px solid blue"
  70. this.decoration.style.boxShadow = "0px 0px 4px 0px #007eff"
  71. this.decoration.style.zIndex = "1000"
  72. this.spread.getHost().appendChild(this.decoration);
  73. }
  74. this.decoration.style.width = (rect.width - 1) + "px";
  75. this.decoration.style.height = (rect.height - 1) + "px";
  76. this.decoration.style.left = rect.x + "px";
  77. this.decoration.style.top = rect.y + "px";
  78. }
  79. DragElement.prototype._removeBlock = function(){
  80. if(this.decoration){
  81. this.decoration.remove();
  82. this.decoration = undefined;
  83. }
  84. }
  85. DragElement.prototype._getHitTestInfo = function(event) {
  86. if(!this.spread){
  87. return;
  88. }
  89. let activeSheet = this.spread.getActiveSheet();
  90. if (!activeSheet) {
  91. return;
  92. }
  93. let canvas = this.spread.getHost().querySelector("canvas[gcuielement]");;
  94. let t = this._getOffset(canvas);
  95. return activeSheet.hitTest(event.pageX - t.left, event.pageY - t.top);
  96. }
  97. DragElement.prototype._getOffset = function(element) {
  98. let left = 0;
  99. let top = 0;
  100. while (element) {
  101. left += element.offsetLeft;
  102. top += element.offsetTop;
  103. element = element.offsetParent;
  104. }
  105. return {
  106. left: left,
  107. top: top
  108. };
  109. }
  110. export {DragElement};
复制代码

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部