Javascript 如何使用“在两列之间拖放项目”；Konva.JS“是什么；？
我正在寻找一种使用Konva.JS在两列之间拖放项目的方法。 因为我找到了，所以我移植了它并编写了以下代码。使用此代码，我希望有两个垂直独立的滚动条，如本示例图像中所示： 但是，如图所示，在运行我的代码时没有： 我的代码：Javascript 如何使用“在两列之间拖放项目”；Konva.JS“是什么；？,javascript,konvajs,Javascript,Konvajs,我正在寻找一种使用Konva.JS在两列之间拖放项目的方法。 因为我找到了，所以我移植了它并编写了以下代码。使用此代码，我希望有两个垂直独立的滚动条，如本示例图像中所示： 但是，如图所示，在运行我的代码时没有： 我的代码： <!DOCTYPE html> <html> <head> <script src="https://unpkg.com/konva@5.0.2/konva.min.js"></script&g
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva@5.0.2/konva.min.js"></script>
<meta charset="utf-8" />
<style>
body {
margin: 0;
padding: 0;
background-color: #f0f0f0;
height:100%;
overflow: hidden;
}
#Leftcontainer {
overflow: auto;
}
#Rightcontainer {
overflow: auto;
}
</style>
</head>
<body>
<div id="container">
<div id="Leftcontainer"></div> <!-- Left Column -->
<div id="Rightcontainer"></div> <!-- Right Column -->
</div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: 60*1090,
});
//Layer 1
var layer = new Konva.Layer();
stage.add(layer);
//Layer 2
var tempLayer = new Konva.Layer();
stage.add(tempLayer);
//Load Image (Group of Left Column)
var leftGroup = new Konva.Group({
id: 'Leftcontainer',
});
layer.add(leftGroup);
for (let i = 0; i < 100; i++) {
var imageObj = new Image();
imageObj.src = './assets/apple.jpg';
imageObj.addEventListener('load', function() {
var dragImage = new Konva.Image({
x: 5,
y: 20+(5+100)*i,
image: imageObj,
width: 100,
height: 100,
draggable: false,
});
leftGroup.add(dragImage);
layer.draw();
});
};
//Load Text (Group of Right Column)
var rightGroup = new Konva.Group({
id: 'Rightcontainer',
});
layer.add(rightGroup);
for (var i = 0; i < 100; i++) {
var WordLabel = new Konva.Label({
x: 300,
y: 18+60*i,
opacity: 0.75,
draggable: true,
fill: 'green',
});
WordLabel.add(
new Konva.Tag({
fill: 'green',
lineJoin: 'round'
})
);
WordLabel.add(
new Konva.Text({
text: "Apple",
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'white',
})
);
rightGroup.add(WordLabel);
};
layer.draw();
</script>
</body>
</html>
身体{
保证金：0；
填充：0；
背景色：#f0；
身高：100%；
溢出：隐藏；
}
#左容器{
溢出：自动；
}
#右容器{
溢出：自动；
}
变量宽度=window.innerWidth；
var height=window.innerHeight；
var阶段=新Konva.阶段({
容器：'容器'，
宽度：宽度，
高度：60*1090，
});
//第一层
var layer=新Konva.layer（）；
阶段。添加（层）；
//第二层
var tempLayer=new Konva.Layer（）；
stage.add（模板玩家）；
//加载图像（左栏组）
var leftGroup=新Konva.Group({
id:'Leftcontainer'，
});
layer.add（leftGroup）；
for（设i=0；i<100；i++）{
var imageObj=新图像（）；
imageObj.src='./assets/apple.jpg'；
imageObj.addEventListener（'load'，function（）{
var dragImage=新的Konva.Image({
x:5，
y:20+（5+100）*i，
图片：imageObj，
宽度：100，
身高：100，
可拖动：错误，
});
添加（dragImage）；
layer.draw（）；
});
};
//加载文本（右列组）
var rightGroup=新Konva.Group({
id:'Rightcontainer'，
});
图层添加（右组）；
对于（变量i=0；i<100；i++）{
var WordLabel=新的Konva.Label({
x:300，
y:18+60*i，
不透明度：0.75，
真的，
填充：“绿色”，
});
WordLabel.add(
新Konva.Tag({
填充：“绿色”，
lineJoin:'圆形'
})
);
WordLabel.add(
新Konva.Text({
文字：“苹果”，
fontFamily：“Calibri”，
尺码：18，
填充：5，
填充：“白色”，
})
);
添加（WordLabel）；
};
layer.draw（）；
3-再次遵循画布解决方案，忽略主“container”元素，并在每个左容器元素和右容器元素中创建一个stage来表示左列和右列。绘制内容，然后将问题处理为将一个元素从一个画布拖到另一个画布。请记住，这不是一个通用的帮助论坛，它已经存在。这是一个“这不是这个网站的目的”的问题。尽管他们要求你发帖，但这是其中一个“如果你在他们自己的网站上没有发现，是时候提交一个问题，要求他们添加它了”。嗨，迈克。谢谢你的评论。你认为寻找如何使用Konva.JS拖放也是一个“这不是这个网站的目的”的问题吗？图画词典是帮助人们理解我的问题的背景知识。因此，我改写了我问题的句子，以强调技术性的香水。我能在这里安全吗？（顺便说一句，你做了一个关于日语的有趣的网站！我是日本人！！）要求别人给你提供示例代码绝对是离题的。这是关闭问题的预设原因之一。如果您还没有编写代码，请从这里开始：您有可以与sortable.js一起使用的代码，所以请了解它是如何工作的，了解konva是如何工作的，并开始尝试将代码从一个移植到另一个。如果你被卡住了，用实际的代码