zha_zi
- 浏览: 592733 次
- 性别:
- 来自: 西安
-
文章分类
最新评论
-
青春依旧：
html5教学哪家强！当然要上华清远见！
深入理解浏览器兼容性模式 -
ashur：
真机智，看得我都笑自己了
js 字符串转dom 和dom 转字符串 -
panghaoyu：
实现一个智能提示功能需要ajax、数据库、jsp/php、算法 ...
solr第一弹 autocomplete(自动补全) -
FakLove：
连线如何删除啊
基于html5 的拖拽连线 -
FakLove：
连线可以再删除吗？
基于html5 的拖拽连线
自动折线，自动判断起始点坐标，拖拽位置变换,大小拖拽,箭头指向等功能，这个版本稍微复杂一点，
还有个简单版本的实现http://zha-zi.iteye.com/blog/1586814 这个应该比较容易理解坐标换算不太多
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
<script type="text/javascript" src="ext/bootstrap.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<script src="js/kinetic-v3.10.2.min.js"></script>
<script>
Ext.onReady(function(){
/**
自动折叠连线算法
*/
var stage=new Kinetic.Stage({
container:'container',
width:1000,
height:1000
});
/**
箭头角度
*/
var arrowAngle=30;
/**
箭头半径
*/
var arrowRadius=5;
/**
箭头长度
*/
var arrowLenght=10;
/**
表示方向
*/
var E="E";
var W="W";
var S="S";
var N="N";
var layer=new Kinetic.Layer();
var flag=false;
var imgArray=[];
var lineArray=[];
var tmpMoveImg=null;
var loop=0;
function Pos(x,y){
this.x=x;
this.y=y;
};
/**
img 图像
lineArrow 带有箭头的line
flag 图像与箭头的指向关系
*/
function LineImage(img,lineArrow,flag){
this.img=img;
this.lineArrow=lineArrow;
this.flag=flag
};
function LineArrow(line,arrow){
this.line=line;
this.arrow=arrow;
};
function NewImage(img,opsArray,group){
this.img=img;
this.group=group;
this.opsArray=opsArray;
};
var imgA= new Image();
var imgObjA;
var groupA;
imgA.onload=function(){
imgObjA= createImage(imgA,100,100,100,100)
var array=new Array();
groupA=new Kinetic.Group({
draggable:true
});
groupA.add(imgObjA);
layer.add(groupA);
addAnchor(groupA, 100, 100, "topLeft");
addAnchor(groupA, 200, 100, "topRight");
addAnchor(groupA, 200, 200, "bottomRight");
addAnchor(groupA, 100, 200, "bottomLeft");
var na=new NewImage(imgObjA,array,groupA);
imgArray.push(na);
stage.add(layer);
}
var imgB= new Image();
var imgObjB;
var groupB;
imgB.onload=function(){
imgObjB= createImage(imgB,400,400,100,100)
var array=new Array();
groupB=new Kinetic.Group({
draggable:true
});
groupB.add(imgObjB);
layer.add(groupB);
addAnchor(groupB, 400, 400, "topLeft");
addAnchor(groupB, 500, 400, "topRight");
addAnchor(groupB, 500, 500, "bottomRight");
addAnchor(groupB, 400, 500, "bottomLeft");
var nb=new NewImage(imgObjB,array,groupB);
imgArray.push(nb);
stage.add(layer);
}
var imgC= new Image();
var imgObjC;
var groupC;
imgC.onload=function(){
imgObjC= createImage(imgC,700,100,100,100)
var array=new Array();
groupC=new Kinetic.Group({
draggable:true
});
groupC.add(imgObjC);
layer.add(groupC);
addAnchor(groupC, 700, 100, "topLeft");
addAnchor(groupC, 800, 100, "topRight");
addAnchor(groupC, 800, 200, "bottomRight");
addAnchor(groupC, 700, 200, "bottomLeft");
var nc=new NewImage(imgObjC,array,groupC);
imgArray.push(nc);
stage.add(layer);
}
var rect=new Kinetic.Rect({
x:0,
y:0,
width:1000,
height:1000,
fill:'white',
storke:'red',
storkeWidth:5
});
layer.add(rect);
imgA.src='img/db.png';
imgB.src='img/mj.png';
imgC.src="img/kt1.png";
rect.on('dblclick',function(){
if(loop%2==0){
flag=true;
for(var i=0;i<imgArray.length;i++){
imgArray[i].group.setDraggable(false);
}
}else{
flag=false;
for(var i=0;i<imgArray.length;i++){
imgArray[i].group.setDraggable(true);
imgArray[i].img.on('mouseover',function(){
var p=new Pos(this.getAbsolutePosition().x,this.getAbsolutePosition().y);
tmpMoveImg=getImgByPos(p);
});
imgArray[i].group.on('dragmove',function(){
for(var j=0;j<tmpMoveImg.opsArray.length;j++){
var realPoints=[];
if(tmpMoveImg.opsArray[j].flag){
calculateStartEndPos(tmpMoveImg.opsArray[j].img,this.children[0],realPoints);
}else{
calculateStartEndPos(this.children[0],tmpMoveImg.opsArray[j].img,realPoints);
}
tmpMoveImg.opsArray[j].lineArrow.line.setPoints(realPoints);
var arrowPoint= calculateArrowPointsByPoints(realPoints);
tmpMoveImg.opsArray[j].lineArrow.arrow.setPoints(arrowPoint);
layer.draw();
realPoints=[];
}
layer.draw();
});
imgArray[i].group.on('dragmove',function(){
for(var j=0;j<lineArray.length;j++){
//lineArray[j].hide();
//moveLineToTarget(lineArray[j])
}
});
}
}
loop++;
for(var i=0;i<imgArray.length;i++){
var innerFlag=false;
var points=[];//标记性的点，为了获取img 使用
var realPoints=[];//真正计算后合理的划线点
imgArray[i].img.on('mousedown',function(){
if(flag){
var pos= stage.getMousePosition();
points=[];
points.push(this.getAbsolutePosition().x);
points.push(this.getAbsolutePosition().y);
innerFlag=true;
}
});
imgArray[i].img.on('mouseup',function(){
if(flag&&innerFlag){
var pos= stage.getMousePosition();
points.push(this.getAbsolutePosition().x);
points.push(this.getAbsolutePosition().y);
//起始点
var p=new Pos(points[0],points[1]);
//结束点
var op=new Pos(points[2],points[3]);
// 划线起始图像
var opImg=getImgByPos(p);
// 划线结束图像
var owImg=getImgByPos(op);
if(opImg!=owImg){
calculateStartEndPos(opImg.img,owImg.img,realPoints);
var lineArrow= createLine(realPoints);
var opLine=new LineImage(opImg.img,lineArrow,true);
var owLine=new LineImage(owImg.img,lineArrow,false);
owImg.opsArray.push(opLine);
opImg.opsArray.push(owLine);
flag=false;
innerFlag=false;
points=[];
realPoints=[];
lineArray.push(lineArrow);
layer.add(lineArrow.line);
layer.add(lineArrow.arrow);
layer.draw();
bandEventToLine(lineArrow.line);
}
}
});
}
})
/**
* 通过坐标获取Img对象
*/
function getImgByPos(pos){
for(var i=0;i<imgArray.length;i++){
if(imgArray[i].img.getAbsolutePosition().x==pos.x&&imgArray[i].img.getAbsolutePosition().y==pos.y){
return imgArray[i];
}
}
}
/**
* 替换对方中line
*/
function replaceOppoLine(imgObj,oldLine,newLine){
for(var i=0;i<imgObj.opsArray.length;i++){
if(imgObj.opsArray[i].line==oldLine){
imgObj.opsArray[i].line=newLine;
}
}
}
/**
* 计算划线的开始坐标
*/
function calculateStartEndPos(imgStart,imgEnd,realPoints){
var realSx=0;
var realSy=0;
var realEx=0;
var realEy=0;
var sx=imgStart.getAbsolutePosition().x;
var sy=imgStart.getAbsolutePosition().y;
var swidth=imgStart.getWidth();
var sheight=imgStart.getHeight();
var ex=imgEnd.getAbsolutePosition().x;
var ey=imgEnd.getAbsolutePosition().y;
var ewidth=imgEnd.getWidth();
var eheight=imgEnd.getHeight();
var array=calculateXY(sy,sheight,ey,eheight ,sx,swidth,ex,ewidth);
var crossArray=null;
if((array[0]!=array[2])&&(array[1]!=array[3])){
var crossArray= calculateCrossPoints(array,sy,sheight,ey,eheight ,sx,swidth,ex,ewidth);
}
realPoints.push(array[0]);
realPoints.push(array[1]);
if(crossArray!=null)
for(var i=0;i<crossArray.length;i++){
realPoints.push(crossArray[i]);
}
realPoints.push(array[2]);
realPoints.push(array[3]);
}
/**
计算连线开始和结束坐标的位置
*/
function calculateXY(sy,sheight,ey,eheight,sx,swidth,ex,ewidth ){
var array=[];
if(sy==ey){
if(sx>ex){
array.push(sx);
array.push(sy+(sheight/2));
array.push(ex+ewidth);
array.push(sy+(eheight/2));
}else{
array.push(sx+swidth);
array.push(sy+(sheight/2));
array.push(ex);
array.push(sy+(eheight/2));
}
}else{
if(sy>ey&&(sy-ey>sheight)){
if(sx>ex){
if(sx-ex<swidth/2){
array.push(sx);
array.push(sy+(sheight/2));
array.push(ex);
array.push(ey+eheight/2);
}else{
array.push(sx);
array.push(sy+(sheight/2));
array.push(ex+(ewidth/2));
array.push(ey+eheight);
}
}else if(sx==ex){
array.push(sx+(swidth/2));
array.push(sy);
array.push(ex+(ewidth/2));
array.push(ey+eheight);
}else{
if(ex-sx<ewidth/2){
array.push(sx);
array.push(sy+(sheight/2));
array.push(ex);
array.push(ey+eheight/2);
}else{
array.push(sx+swidth);
array.push(sy+(sheight/2));
array.push(ex+(ewidth/2));
array.push(ey+eheight);
}
}
}else if(sy<ey&&(ey-sy>eheight)){
if(sx>ex){
if(sx-ex<swidth/2){
array.push(sx);
array.push(sy+sheight/2);
array.push(ex);
array.push(ey+eheight/2);
}else{
array.push(sx+(swidth/2));
array.push(sy+sheight);
array.push(ex+ewidth);
array.push(ey+(eheight/2));
}
}else if(sx==ex){
array.push(sx+(swidth/2));
array.push(sy+sheight);
array.push(ex+(ewidth/2));
array.push(ey);
}else{
if(ex-sx<ewidth/2){
array.push(sx);
array.push(sy+sheight/2);
array.push(ex);
array.push(ey+eheight/2);
}else{
array.push(sx+(swidth/2));
array.push(sy+sheight);
array.push(ex);
array.push(ey+(eheight/2));
}
}
}else{
if((sy<ey&&(ey-sy<eheight))||sy>ey&&(sy-ey<sheight)){
array.push(sx+swidth/2);
array.push(sy);
array.push(ex+ewidth/2);
array.push(ey);
}
}
}
return array;
}
/**
计算折叠点的位置
*/
function calculateCrossPoints(array,sy,sheight,ey,eheight ,sx,swidth,ex,ewidth){
var pointsArray=[];
var x=array[0];
var y=array[1];
var x1=array[2];
var y1=array[3];
var f=false;
if((x-x1)>0&&(y-y1)>0){
f=true;
}
if((x1-x)>0&&(y1-y)>0){
f=true;
}
/**
y轴的多个折叠点
*/
if((sy>ey&&sy-ey<=sheight)||(sy<ey&&ey-sy<=eheight)){
if(sy>ey&&sy-ey<=sheight){
pointsArray.push(x);
pointsArray.push(y1-sheight);
pointsArray.push(x1);
pointsArray.push(y1-sheight);
}else if(sy<ey&&ey-sy<=eheight){
pointsArray.push(x);
pointsArray.push(y-eheight);
pointsArray.push(x1);
pointsArray.push(y-eheight);
}
}else if((sx>ex&&sx-ex<=sheight/2)||(sx<ex&&ex-sx<=eheight/2)){
/**
x轴的多个折点
*/
//x= sx-swidth/2
//y=y+sheight/2
if(sx-ex<sheight/2){
pointsArray.push(sx-ewidth);
pointsArray.push(sy+sheight/2);
pointsArray.push(sx-ewidth);
pointsArray.push(ey+eheight/2);
}else if(ex-sx<eheight/2){
pointsArray.push(ex-swidth);
pointsArray.push(sy+sheight/2);
pointsArray.push(ex-swidth);
pointsArray.push(ey+eheight/2);
}
}else{
/**
单个折叠点
*/
if(f){
if(x<x1){
pointsArray.push(x);
}else{
pointsArray.push(x1);
}
if(y<y1){
pointsArray.push(y1);
}else{
pointsArray.push(y);
}
}else{
if(x<x1){
pointsArray.push(x1);
}else{
pointsArray.push(x);
}
if(y<y1){
pointsArray.push(y1);
}else{
pointsArray.push(y);
}
}
}
return pointsArray;
}
function createImage(img,x,y,width,height){
var imgObj=new Kinetic.Image({
x:x,
y:y,
width:width,
height:height,
//draggable:true,
image:img,
name:"image",
});
imgObj.on("mouseover", function(){
document.body.style.cursor = "pointer";
});
imgObj.on("mouseout", function(){
document.body.style.cursor = "default";
});
return imgObj
}
/**
根据points 节点数组划线
*/
function createLine(points){
var line=new Kinetic.Line({
points:points,
stroke:'green',
strokeWidth:2,
lineCap:'round',
lineJoin:'round'
});
var lenght=points.length;
var x=points[lenght-4];
var y=points[lenght-3];
var x1=points[lenght-2];
var y1=points[lenght-1];
var arrow=createArrow(calculateArrowPosition(x1,y1,calculateArrowAspect(x,y,x1,y1)),"black");
var la =new LineArrow(line,arrow);
return la;
}
function bandEventToLine(line){
line.saveData();
line.on("mouseover", function(){
document.body.style.cursor = "pointer";
});
line.on("mouseout", function(){
document.body.style.cursor = "default";
});
}
/**
通过line计算 arrow 的points 数组
*/
function calculateArrowPointsByLine(line){
var points=line.getPoints();
var lenght=points.length;
var x=points[lenght-4];
var y=points[lenght-3];
var x1=points[lenght-2];
var y1=points[lenght-1];
return calculateArrowPosition(x1,y1,calculateArrowAspect(x,y,x1,y1));
}
function calculateArrowPointsByPoints(points){
var lenght=points.length;
var x=points[lenght-4];
var y=points[lenght-3];
var x1=points[lenght-2];
var y1=points[lenght-1];
return calculateArrowPosition(x1,y1,calculateArrowAspect(x,y,x1,y1));
}
/**
计算箭头朝向
*/
function calculateArrowAspect(x,y,x1,y1){
if(x==x1){
if(y>y1){
return N;
}else{
return S;
}
}else if(y==y1){
if(x>x1){
return W;
}else{
return E;
}
}
}
/**
计算箭头具体位置
*/
function calculateArrowPosition(x,y,aspect){
var points=[];
switch(aspect){
case N:
points.push(x);
points.push(y);
points.push(x-arrowRadius);
points.push(y+arrowLenght);
points.push(x+arrowRadius);
points.push(y+arrowLenght);
break;
case S:
points.push(x);
points.push(y);
points.push(x-arrowRadius);
points.push(y-arrowLenght);
points.push(x+arrowRadius);
points.push(y-arrowLenght);
break;
case E:
points.push(x);
points.push(y);
points.push(x-arrowLenght);
points.push(y+arrowRadius);
points.push(x-arrowLenght);
points.push(y-arrowRadius);
break;
case W:
points.push(x);
points.push(y);
points.push(x+arrowLenght);
points.push(y+arrowRadius);
points.push(x+arrowLenght);
points.push(y-arrowRadius);
break;
}
return points;
}
function createArrow(points,fill){
var arrow=new Kinetic.Polygon({
points: points,
fill: fill,
stroke: "black",
strokeWidth: 1
});
return arrow;
}
function addAnchor(group,x,y,name){
var stage=group.getStage();
var layer=group.getLayer();
var anchor=new Kinetic.Circle({
x:x,
y:y,
stroke:'#666',
fill:'green',
radius:1,
name:name,
draggable:true
});
anchor.on('dragmove',function(){
update(group, this);
layer.draw();
});
anchor.on('dragend',function(){
group.setDraggable(true);
layer.draw();
});
anchor.on('mousedown touchstar',function(){
group.setDraggable(false);
//this.moveToTop();
});
anchor.on('mouseover',function(){
var layer = this.getLayer();
document.body.style.cursor = "pointer";
this.setRadius(3);
layer.draw();
});
anchor.on('mouseout',function(){
var layer = this.getLayer();
document.body.style.cursor = "default";
this.setRadius(1);
layer.draw();
});
group.add(anchor);
}
function update(group,activeAnchor){
var topLeft=group.get(".topLeft")[0];
var topRight=group.get(".topRight")[0];
var bottomLeft=group.get(".bottomLeft")[0];
var bottomRight=group.get(".bottomRight")[0];
var image=group.children[0];
switch(activeAnchor.getName()){
case "topLeft":
topRight.attrs.y = activeAnchor.attrs.y;
bottomLeft.attrs.x = activeAnchor.attrs.x;
break;
case "topRight":
topLeft.attrs.y = activeAnchor.attrs.y;
bottomRight.attrs.x = activeAnchor.attrs.x;
break;
case "bottomRight":
bottomLeft.attrs.y = activeAnchor.attrs.y;
topRight.attrs.x = activeAnchor.attrs.x;
break;
case "bottomLeft":
bottomRight.attrs.y = activeAnchor.attrs.y;
topLeft.attrs.x = activeAnchor.attrs.x;
break;
}
image.setPosition(topLeft.attrs.x, topLeft.attrs.y);
image.setSize(topRight.attrs.x - topLeft.attrs.x, bottomLeft.attrs.y - topLeft.attrs.y);
}
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
分享到：
评论
2 楼
zha_zi
2012-12-26
wxg456852 写道
例子有问题啊
参考http://zha-zi.iteye.com/blog/1586814
1 楼
wxg456852
2012-12-25
例子有问题啊
发表评论
-
浏览器事件是冒泡还是捕获
2016-07-27 16:37 3021这是三种事件处理的模型 （1）冒泡型事件：事件按照从最特定 ... -
javascript 编程反思1 new 原理
2016-04-27 14:05 0我们在定义对象的时候通常使用两种方式 1：通过new 关键 ... -
javascript 设计模式1 单例模式
2015-06-15 15:10 0... -
facebook html5开发app 失败的原因，
2015-06-08 11:56 1957Here’s why the Facebook iOS a ... -
jQuery zepto 用法区别
2015-05-22 11:50 0以前都是用jQuery 因为移动项目中在使用zepto 基本 ... -
js 加载机制和defer async用法
2015-05-15 17:45 0这是今天我一个 ... -
grunt 不是内部命令
2015-05-04 19:21 1459grunt 不是内部命令！！ ... -
你不知道的URL中#井号用法
2015-02-10 12:36 7079URL 中 # 井号的用法 ... -
JS 伪数组原理详解
2014-12-01 11:24 2487jav ... -
jquery 滚动条插件nanoScroller 的用法
2014-11-27 11:17 5699scroller 插件nanoSc ... -
h5，hybrid 开发中问题汇总
2014-10-17 11:26 8205H5开发问题总结 和jqu ... -
backbone中的 reuter 和histroy
2014-10-13 10:45 624Router和History (路由控制) Back ... -
animate 技术分析 raphael
2014-07-28 16:40 0Animate 什么是animate，一般我 ... -
Raphaeljs 插件实现任意SVG节点加载
2014-07-14 09:26 8624SVG 和Raphael http://rap ... -
ECMAScript 5
2014-07-08 14:36 1056新版本在给基本库带来 ... -
jQueryUI Widget 代码详解
2014-07-07 12:20 0为什么需要研究JqueryUI 中Widget 的代码 ... -
typescript 用法介绍
2014-07-01 09:58 1237前言 Typescript的形態 如何定義va ... -
window.eval 与eval 区别
2014-06-27 10:57 1083它们之间有区别吗？ 开发过程中似乎很少有人去加个额外的win ... -
jQuery 学习分析系列1 jQuery是个什么东西
2014-06-23 10:06 0jQuery 的基本结构 过去使用jQuery ... -
Sizzle 引擎--原理与实践3
2014-06-18 14:05 787Sizzle引擎--原理与实践（三） 查找的入口对 ...
相关推荐
标题中的“基于HTML5的拖拽连线”是指利用HTML5的Canvas API和WebGL技术实现的一种交互式图形编辑功能，用户可以通过鼠标拖拽线条来连接不同的图形元素，常见于流程图、电路图或者逻辑图的绘制。这个技术的核心是...
在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）环境中实现类似Visio的拖拽连线图、星状图和网络拓扑图。WPF是.NET Framework的一部分，提供了一个强大的用户界面框架，用于构建丰富的桌面...
在这个“HTML5基于SVG实现可拖拽和缩放的世界地图效果源码”中，我们主要会探讨以下几个关键知识点： 1. SVG的基本概念与应用：SVG是一种XML标记语言，用于描述二维图形和图像。它可以精确地控制图形的每一个细节，...
综上所述，"H5+canvas+js实现连线题"项目涵盖了前端开发的多个重要方面，包括HTML5 Canvas的图形绘制、JavaScript的事件处理和算法设计，以及良好的交互体验构建。对于想要提升Web开发技能或对互动教育应用感兴趣的...
在本文中，我们将深入探讨如何使用C#实现一个免编程的拖拽节点组合连线系统，该系统能够模拟编程功能。这个系统的核心特点是用户可以通过拖动功能块并连接它们来构建逻辑流程，而无需编写实际的代码。以下是实现这一...
HTML基于vue2.0，拖拽式网站设计器、大屏设计器，基于VUE，实现拖拽 + 配置方式生成数据大屏，为简化开发、提高效率而生。 特性 0 代码： 实现完全拖拽 + 配置式生成大屏，设计即生产。 快速开发&部署： 项目采用...
要实现连线题，首先需要在HTML中创建一个canvas元素，并通过JavaScript获取到它的2D渲染上下文。 以下是一个简单的步骤来实现一个连线题： 1. **HTML结构**：创建canvas元素，并设置合适的宽高。可以添加id属性...
在本文中，我们将深入探讨如何使用jsPlumb实现HTML5拖拽连线的功能。 首先，确保你的项目环境兼容jsPlumb。jsPlumb支持IE6及以上版本以及现代浏览器，但存在一些特定浏览器的兼容性问题，例如IE9的jQuery 1.6.x和...
jsPlumb 开发入门教程（实现 html5 拖拽连线） jsPlumb 是一个强大的 JavaScript 连线库，可以将 html 中的元素用箭头、曲线、直线等连接起来，适用于开发 Web 上的图表、建模工具等。它同时支持 jQuery+jQuery UI...
在本项目"基于html5 drag api实现的vue树形拖拽组件.zip"中，我们聚焦于HTML5的拖放（Drag and Drop）API以及如何在Vue.js框架下构建一个可拖拽的树形组件。 拖放API是HTML5的一个关键特性，允许用户通过简单的鼠标...
标题中的“基于Bootstrap.3的文件上传效果, 可拖拽上传、预览的HTML5文件上传插件.zip”指的是一个使用Bootstrap 3框架和HTML5技术实现的高级文件上传功能。这个插件允许用户通过拖放操作上传文件，并且在上传前可以...
在Angular框架中实现拖拽排序是一项常见的需求，它允许用户通过直观的拖放操作来调整元素的顺序。本文将深入探讨如何在Angular应用中实现这一功能，并基于提供的"dragSort-Angular-master"项目进行详细讲解。 首先...
在这个名为"基于html5dragapi实现的vue树形拖拽组件"的项目中，开发者利用这两者结合，创建了一个能够允许用户在树形结构中拖拽节点的Vue组件。这个组件对于构建数据管理和配置界面等场景尤其有用，因为它可以提供...
5. **拖拽生成**：`jsplumb拖拽生成`特性让用户可以通过简单的拖放操作来创建和编辑连线，提供了一种交互式的用户体验。 6. `test1.html`：这可能是一个示例页面，演示了如何在HTML环境中使用`jsplumb`库来创建连线...
因为标题写的是实例，所以本次就不做讲解了，因为这个实例我也算是东拼西凑整出来的，参考了大概5、6款拖拽上传的插件和demo，然后把其中好的地方挑出来，最后就成了这么一个实例，一起来看下吧（地址不能保证长久...
### HTML5 拖拽上传实现详解 #### 一、引言 随着HTML5的普及与浏览器技术的进步，用户界面的交互方式变得越来越多样化。其中，“拖拽上传”功能就是一个非常实用且广受欢迎的例子。从Gmail的附件拖拽上传到网易...
综上所述，基于Vue实现可拖拽的树形表格需要对Vue组件化编程、数据管理、事件处理和DOM操作有深入理解，同时还需要掌握HTML5的Drag and Drop API。通过这些技术的结合，我们可以创建出一个既美观又实用的交互式应用...
基于Vue的可视化拖拽编辑工具旨在进一步提升前端开发效率，允许开发者通过直观的图形界面设计和布局元素，而非编写HTML和CSS代码，从而快速构建UI界面。这种工具特别适用于需要快速原型设计或对非技术背景的团队成员...