Как на самом деле реализовать drag'n'drop в Javascript/Metro-UI под Windows 8

Каким-то образом я, должно быть, пропустил надлежащую документацию для чего-то такого простого. Поиск через Google тоже не дает полезных результатов.

Итак, вот что я хочу сделать: Нарисовать прямоугольник (div), сделать его перетаскиваемым и поместить в другое место с надлежащей проверкой того, что точка перетаскивания действительно действительна.

Как мне это сделать с помощью инструментов, предоставляемых бета-версией Visual Studio 11?

Все, что я нашел до сих пор, это событие onDragging-Event, которое не очень полезно из-за нехватки предоставленной информации.

Пример кода был бы отличным, я также мог бы жить со ссылкой на какой-нибудь блог или что-то в этом роде.

Изменить: перетаскивание через сенсорный ввод, то есть не через «обычное» взаимодействие с мышью.


javascript drag-and-drop microsoft-metro windows-8
person Rhywden    schedule 17.03.2012    source источник
comment
Я не знаю последствий windows-8/metro-ui, но это хорошая отправная точка: luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx   -  person Robot Woods    schedule 18.03.2012
comment
Смотрите мой комментарий ниже. Параметр draggable=true работает только при использовании указателя, похожего на мышь. Он не работает с сенсорным вводом.   -  person Rhywden    schedule 18.03.2012
comment
Вам придется следить за событиями касания вместо мыши: touchstart, touchmove, touchend. Кроме того, вы должны добавить прослушиватель в тело и preventDefault(), чтобы все это не двигалось.   -  person Robot Woods    schedule 18.03.2012
comment
Э-э, только что заметил, что ваш пример не HTML5. На самом деле я хотел обойти весь этот беспорядок, связанный с программированием самодельного решения перетаскивания. Потому что это то, что в основном делает Люк Брейер. Я имею в виду, статья 2006 года ;)   -  person Rhywden    schedule 18.03.2012

Ответы (3)


arrow_upward
1
arrow_downward

Только что получил ответ от сотрудника Microsoft: это ошибка: http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/88cfb689-2e38-417c-a2be-9682f1a23ae4/

Итак, пока эта ошибка не будет исправлена, похоже, вам действительно нужно свернуть свою собственную.

person Rhywden    schedule 21.03.2012

arrow_upward
0
arrow_downward

Следующая ссылка содержит пошаговое руководство по перетаскиванию HTML5 в IE10 из блога IE. IE10 — это движок для веб-приложений Windows, поэтому он будет работать в вашем приложении для Windows 8.

http://blogs.msdn.com/b/ie/archive/2011/07/27/html5-drag-and-drop-in-ie10-ppb2.aspx

person j40    schedule 18.03.2012
comment
Только что попробовал. В IE10 демо-версия FridgeMagnets не работает в режиме сенсорного экрана (стилус и мышь работают, как заявлено). Вы не можете перетаскивать элементы, вместо этого любое движение перетаскивания будет прокручивать экран. Точно так же Metro-приложение, состоящее только из ‹div draggable=true›, на самом деле не даст перетаскиваемого div. - person Rhywden; 18.03.2012

arrow_upward
0
arrow_downward

Вплоть до бета-версии (CP) включительно мы могли использовать события dragstart, drag, dragend даже для сенсорного ввода в Metro. В более новых сборках это перестало работать (события больше не срабатывают), и, похоже, нам придется переключиться на MSPointerMove и др. для обработки сенсорного перетаскивания. Из нескольких образцов, которые я создал, кажется, что автономный IE никогда не поддерживал dragstart, drag и dragend для касания - другими словами, сенсорное перетаскивание работает в моем образце в бета-версии Metro, но тот же файл не работает в обычном IE там.

Что касается ответа сотрудника Microsoft, упомянутого ниже, я считаю, что эта ошибка не связана с проблемой перетаскивания касанием.

person obiuquido144    schedule 21.05.2012