KineticJS: сделайте так, чтобы отброшенные элементы можно было перетаскивать как Kinetic.Group.

Ну.. так что это та же проблема, с которой я столкнулся с Kinetic.Group. Я пробовал несколько вещей, чтобы заставить это работать, но всегда один и тот же результат: это не работает, и, что еще хуже, основные функции перетаскивания исчезают!

Я уже знаю, как это сделать внутри одного контейнера, трудности возникают, когда я пытаюсь адаптировать его к перетаскиванию из DOM в контейнер. После падения мне нужно, чтобы изображения и фигуры перемещались вместе. Вот почему я создал группу для каждого элемента и сделал ее перетаскиваемой.

Это скрипка, которую я изменяю, чтобы отброшенные элементы на холсте можно было перетаскивать как целую группу (неработающая скрипка) http://jsfiddle.net/gkefk/15/. Что не так с этим кодом?

PS1: это основная функция перетаскивания http://jsfiddle.net/gkefk/14/, который я редактирую.

PS2: я новичок, поэтому, если вы обнаружите "глупости" в этом коде, сообщите об этом.


javascript drag-and-drop jquery kineticjs
person Sahar Ch.    schedule 26.03.2014    source источник
comment
Избавьтесь от jQuery полностью, не используйте его или его плагины, здесь вам нужна только реализация холста, чтобы ваша DOM не изменялась. Это "глупость/ошибка", которую вы делаете. Когда вы используете пользовательский интерфейс jQuery для выполнения перетаскивания за вас, вы изменяете DOM, из-за чего ваш холст не работает должным образом.   -  person SoluableNonagon    schedule 26.03.2014
comment
Можно использовать только аккордеон jquery ui, не так ли?   -  person Sahar Ch.    schedule 26.03.2014
comment
Я рекомендую не использовать его, так как он все равно будет мешать реализации кинетики.   -  person SoluableNonagon    schedule 26.03.2014
comment
Да? Но мне нужно расположить предметы в определенном логическом порядке и разделить их (оборудование, датчики и особенности здания):/ Есть ли у вас какие-либо предложения о том, как это сделать?   -  person Sahar Ch.    schedule 26.03.2014
comment
Это можно добавить позже, сначала заставьте исходную задачу работать правильно, позже вы можете сгруппировать с реализацией аккордеона в kineticjs. Позже вы динамически создадите слой с левой стороны, который содержит несколько групп и возможность показать/скрыть его.   -  person SoluableNonagon    schedule 26.03.2014

Ответы (1)


arrow_upward
1
arrow_downward

Простое руководство, как получить то, что вы хотите от этого:

Избавьтесь от 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.
person SoluableNonagon    schedule 26.03.2014
comment
Я выполню эти шаги и сообщу вам, если обнаружу трудности (заранее извините: p). Думаю, я слишком много возился со своим кодом. - person Sahar Ch.; 26.03.2014
comment
не нужно извиняться, вы пытались использовать вместе две совершенно разные библиотеки, которые используются для совершенно разных целей. KineticJS предназначен для Canvas, а JQueryUI изменяет DOM. - person SoluableNonagon; 26.03.2014
comment
Эй, @EliteOctagon .. У меня есть эта проблема сейчас и перетащите с одного слоя на другой"> stackoverflow.com/questions/22707636/ - person Sahar Ch.; 28.03.2014
comment
Ваш прямоугольник должен быть в новой группе, когда вы его создаете, тогда вы можете проверять пересечения, когда пытаетесь поместить в него дом, так что ваш дом и прямоугольник будут в одной группе. таким образом, когда вы перетаскиваете прямоугольник, вы также перетаскиваете дом. - person SoluableNonagon; 04.04.2014