KineticJS:将掉落的元素作为Kinetic.Group进行拖拽

时间:2014-03-26 10:56:36

标签: javascript jquery drag-and-drop kineticjs

嗯..所以我和Kinetic.Group面临同样的问题。我尝试了几个方法来完成这项工作,但总是有相同的结果:它不起作用,更糟糕的是,基本的拖放功能消失了!

我已经知道如何在一个容器中执行此操作,当我尝试将其调整为拖放从DOM到容器时,遇到了困难。在跌落之后,我需要将图像和形状一起移动。这就是我为每个项目创建一个组并使其可拖动的原因。

这是我要改变的小提琴,以便在画布中制作掉落的元素,作为一个整体组(非工作小提琴)http://jsfiddle.net/gkefk/15/可以拖动。这段代码有什么问题?

PS1:这是我正在编辑的拖放http://jsfiddle.net/gkefk/14/的主要功能。

PS2:我是初学者,所以如果您在该代码中发现“愚蠢”,请报告。

1 个答案:

答案 0 :(得分:1)

一个简单的指南如何从中得到你想要的东西:

摆脱jQuery并重新开始。

1. Create a new Stage
2. Create two layers, one taking up the left half of the Stage, the other the right half.
3. put all your objects on the left side, make them clone-able on mousedown and fire the drag event so you can place them in the other layer on mouse up.
4. if your item is a rectangle - I'm assuming this is a group which is will have children, create a new group, and a rectangle inside it, place it in the right layer on drop.
5. if your item is a house, check for mouse intersection with a rectangle, if mouse is over a rectangle, get the parent of the rectangle on drop (which will be a group), and then place the house in that group, else place in right layer freely.