2013-02-19 3 views
0

Элемент Html5 имеет новый атрибут, перетаскиваемый и используемый таким образом.HTML5 перетаскиваемый в пределах границы

http://www.w3.org/TR/2011/WD-html5-20110405/dnd.html

<div draggable="true">foo</div> 

также принимает событие ondrag с аргументом события мыши.

<div draggable="true" ondrag="drag(event)">foo</div> 

Мой вопрос: Есть ли способ установить границы перетаскивания, так что я могу перетаскивать только по горизонтали, например, в JQuery, http://jqueryui.com/draggable/#constrain-movement.

без использования JQuery .. с Javascript только ..

+0

Вы имеете в виду без использования jQuery или без использования jQueryUI или без использования javascript? – David

+1

Если вы пытаетесь переместить div вокруг окна (например, диалоговое окно или окно), я не думаю, что материал «draggable» - это то, что вы хотите. – NickSlash

+0

Я согласен с NickSlash - возможно, вы не хотите использовать 'draggable'. http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html - html5 draggable не полезен для реализации богатых интерфейсов перетаскивания. Вместо этого используйте Javascript, но вам не нужен jQuery - есть много других библиотек, или вы можете просто написать свой собственный. Но если вы уже используете jQuery, используйте его! – codefactor

ответ

5

перетаскиваемую интерфейс HTML5 довольно сильно отличается от JQuery UI перетаскиваемом. Цель состоит не в том, чтобы позволить вам перемещать элементы в песочнице, а скорее, чтобы вы перемещали данные с визуальной обратной связью.

Когда вы перетаскиваете что-то вокруг, используя jQuery draggable, это влияет на визуальные изменения на экране. Он изменяет смещения элемента, чтобы он отображался в новом месте, и есть много вариантов, которые позволяют вам контролировать, где и как он перемещается. Свойство html draggable существует, чтобы дать вам степень контроля над существующими механизмами перетаскивания. Например, вы можете выделить и перетащить текст на все, что позволяет вводить текст, и он скопирует текст. Кроме того, вы можете перетащить изображение из браузера в папку, и оно скопирует изображение.

Так же, как вы не можете ограничить движение мыши пользователя, если они перетаскивают изображение с экрана браузера на свой рабочий стол, я не верю, что у вас есть власть над тем, где пользователь перетаскивает что-то с помощью свойства html. Скорее, этот механизм позволяет вам расширить то, что можно перетащить и выбросить за пределы текста и изображений. Вы можете полностью отключить механизм в некоторых случаях, но он не позволяет точно контролировать то, что пользователь решает делать с данными. Это очень высокоуровневый механизм, который позволяет передавать данные между совершенно разными приложениями и дает вам слишком большую власть над тем, как он себя ведет, вероятно, испортит его способность работать в разных ситуациях, а также он.