HTML5 可在边界内拖动 [英] HTML5 draggable within a boundary

问题描述

Html5 元素有一个新属性，可拖动，并像这样使用它.

Html5 element has a new attribute, draggable, and used it like this.

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

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

它还接受一个带有鼠标事件参数的 ondrag 事件.

it also accept an event ondrag with argument a mouse event.

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

我的问题是；有没有办法设置拖动边界，以便我只能水平拖动，就像在 JQuery 中一样，http://jqueryui.com/draggable/#constrain-movement.

My question is; Is there a way to set a drag boundaries, so that I can drag horizontally only , like in JQuery, http://jqueryui.com/draggable/#constrain-movement.

不使用 JQuery.. 仅使用 Javascript..

Without using JQuery.. with Javascript only..

推荐答案

HTML5 可拖动界面与 jQuery UI 可拖动界面有很大不同.它的目的不是让您在沙箱中移动元素，而是让您通过视觉反馈移动数据.

The HTML5 draggable interface is quite different from the jQuery UI draggable. It's purpose is not to allow you to move elements around in a sandbox, but rather to let you move data around with visual feedback.

当你使用 jQuery draggable 拖动东西时，它会影响屏幕上的视觉变化.它会更改元素的偏移量，使其出现在新位置，并且有许多选项可让您控制元素移动的位置和方式.html draggable 属性的存在是为了让您在一定程度上更好地控制现有的拖放机制.例如，您可以突出显示文本并将其拖到任何允许您输入文本的位置，然后它就会复制文本.此外，您可以将图像从浏览器拖到文件夹中，它会复制图像.

When you drag something around using jQuery draggable, it is to affect a visual change on the screen. It changes the offsets of an element so it appears in a new location, and there are many options that allow you to control where and how it moves. The html draggable property exists to give you a degree more control over existing drag and drop mechanisms. For example, you can highlight and drag text to anything that lets you enter text, and it will copy the text. Also, you can drag an image off of a browser into a folder, and it will copy the image.

就像如果用户将图像从浏览器屏幕拖到桌面上，您就无法限制他们的鼠标移动，我认为您对用户使用 html 属性拖动某些内容的位置没有任何权力.相反，该机制允许您扩展文本和图像之外的可拖放内容.在某些情况下，您可以完全禁用该机制，但它不允许对用户决定对数据执行的操作进行细粒度控制.它是一种非常高级的机制，允许在完全不同的应用程序之间进行数据传输，如果对它的行为方式赋予过多的权力，可能会破坏它在不同情况下工作的能力.

Just as you cannot restrict a user's mouse movement if they drag an image off of a browser screen onto their desktop, I do not believe you have any power over where a user drags something using the html property. Rather, the mechanism lets you expand what can be dragged and dropped beyond text and images. You can disable the mechanism entirely in some cases, but it does not allow fine grained control of what the user decides to do with the data. It is a very high-level mechanism that allows data transfer between completely different applications, and giving you too much power over how it behaves would likely ruin its ability to work across different situations as well as it does.

这篇关于HTML5 可在边界内拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！