2014-03-26 56 views
0

那麼..所以這是我面對Kinetic.Group同樣的問題。我嘗試了幾件事情來完成這項工作,但總是得到相同的結果:它不起作用,甚至更糟的是,基本的拖放功能消失了!KineticJS:使投放的元素可以作爲Kinetic.Group拖動

我已經知道如何做到這裏面一個容器,難的是當我嘗試將其適應的阻力和DOM下降到容器。下降後,我需要將圖像和形狀一起移動。這就是爲什麼我爲每個項目創建一個組並使其可拖動的原因。

這是我正在改變的小提琴,使畫布中的下降元素可以作爲整個羣組拖動(非工作小提琴)http://jsfiddle.net/gkefk/15/。這段代碼有什麼問題?

PS1:這一個是我正在編輯的拖放http://jsfiddle.net/gkefk/14/的主要功能。

PS2:我是初學者,所以如果你在代碼中發現「stupidities」,請報告。

+0

完全擺脫jQuery,不要使用它或它的插件,你只需要一個canvas實現,這樣你的DOM就不會被修改。這就是你所做的'愚蠢/錯誤'。當您使用jQuery UI爲您進行拖放操作時,您正在修改DOM,這會使畫布無法正常工作。 – SoluableNonagon

+0

可以使用手風琴jquery ui,不是嗎? –

+0

我建議不要使用它,因爲它仍然會干擾事物的kineticjs實現。 – SoluableNonagon

回答

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. 
+0

我會按照這些步驟告訴你,如果我發現困難(提前抱歉:p)我想我的代碼太亂了。 –

+0

不需要抱歉,你試圖將兩個非常不同的庫一起使用,這些庫用於非常不同的事情。 KineticJS用於Canvas,而JQueryUI修改DOM。 – SoluableNonagon

+0

嘿@EliteOctagon ..我現在有這個問題http://stackoverflow.com/questions/22707636/kineticjs-drag-and-drop-from-one-layer-to-another –

相關問題