如何使用html制作一个“draggable”项目?

时间:2022-12-06 15:49:14

Is there a way to just use html to make an item draggable? (not just classifying an element as draggable)

有没有办法只使用HTML来使项目可拖动? (不只是将元素分类为可拖动的)

5 个解决方案

#1


Draggable Enlightenment


Unfortunately, HTML is a feeble presentational language which merely gives us the functionality to describe structure of text-based data in a document. It has no way of adding marvelous interactions such as 'draggability'.

遗憾的是,HTML是一种微弱的表达语言,它仅仅为我们提供了描述文档中基于文本的数据结构的功能。它无法添加诸如“可拖动性”之类的奇妙互动。

Luckily, JavaScript allowed such interactions and it's widespread uptake in web browsers caused developers to rejoice! However browsers implemented JavaScript in a variety of ways, causing heartache and distress for debuggers and testers.

幸运的是,JavaScript允许这样的交互,并且它在Web浏览器中的广泛应用导致开发人员高兴!但是,浏览器以各种方式实现了JavaScript,给调试器和测试人员带来了痛苦和困扰。

Alas, help is at hand. JavaScript frameworks have become the solution to the misery of inconsistent implementations and developers can again add interactions to their pages.

唉,帮助就在眼前。 JavaScript框架已经成为解决不一致实现的痛苦的解决方案,开发人员可以再次向其页面添加交互。

Arguably the finest of these frameworks goes by the name of jQuery and can be found here. Others go by the name of Prototype and Dojo.

可以说这些框架中最精美的是jQuery的名称,可以在这里找到。其他人则选择Prototype和Dojo的名字。

Get to know one of them closely and draggable enlightenment will be yours.

密切了解其中一个,并且可以实现可拖延的启蒙。

#2


No, you'll need to use javascript.

不,你需要使用javascript。

jQuery is very popular javascript framework which does a lot of the heavy lifting for you. Here are the docs for their draggable component.

jQuery是非常流行的javascript框架,它为你做了很多繁重的工作。以下是可拖动组件的文档。

#3


Nope Javascript. Have a look at JQuery.

没有Javascript。看看JQuery。

#4


If you are happy using HTML5, then there is support for draggable elements, but it does still use javascript.

如果您对使用HTML5感到满意,那么支持可拖动元素,但它仍然使用javascript。

HTML5 adds a couple of extra events: ondragenter, ondrop and ondragover.

HTML5增加了一些额外的事件:ondragenter,ondrop和ondragover。

Here's an example page: http://ljouanneau.com/lab/html5/demodragdrop.html

这是一个示例页面:http://ljouanneau.com/lab/html5/demodragdrop.html

#5


You will need to use Javascript for that.

你需要使用Javascript。

#1


Draggable Enlightenment


Unfortunately, HTML is a feeble presentational language which merely gives us the functionality to describe structure of text-based data in a document. It has no way of adding marvelous interactions such as 'draggability'.

遗憾的是,HTML是一种微弱的表达语言,它仅仅为我们提供了描述文档中基于文本的数据结构的功能。它无法添加诸如“可拖动性”之类的奇妙互动。

Luckily, JavaScript allowed such interactions and it's widespread uptake in web browsers caused developers to rejoice! However browsers implemented JavaScript in a variety of ways, causing heartache and distress for debuggers and testers.

幸运的是,JavaScript允许这样的交互,并且它在Web浏览器中的广泛应用导致开发人员高兴!但是,浏览器以各种方式实现了JavaScript,给调试器和测试人员带来了痛苦和困扰。

Alas, help is at hand. JavaScript frameworks have become the solution to the misery of inconsistent implementations and developers can again add interactions to their pages.

唉,帮助就在眼前。 JavaScript框架已经成为解决不一致实现的痛苦的解决方案,开发人员可以再次向其页面添加交互。

Arguably the finest of these frameworks goes by the name of jQuery and can be found here. Others go by the name of Prototype and Dojo.

可以说这些框架中最精美的是jQuery的名称,可以在这里找到。其他人则选择Prototype和Dojo的名字。

Get to know one of them closely and draggable enlightenment will be yours.

密切了解其中一个,并且可以实现可拖延的启蒙。

#2


No, you'll need to use javascript.

不,你需要使用javascript。

jQuery is very popular javascript framework which does a lot of the heavy lifting for you. Here are the docs for their draggable component.

jQuery是非常流行的javascript框架,它为你做了很多繁重的工作。以下是可拖动组件的文档。

#3


Nope Javascript. Have a look at JQuery.

没有Javascript。看看JQuery。

#4


If you are happy using HTML5, then there is support for draggable elements, but it does still use javascript.

如果您对使用HTML5感到满意,那么支持可拖动元素,但它仍然使用javascript。

HTML5 adds a couple of extra events: ondragenter, ondrop and ondragover.

HTML5增加了一些额外的事件:ondragenter,ondrop和ondragover。

Here's an example page: http://ljouanneau.com/lab/html5/demodragdrop.html

这是一个示例页面:http://ljouanneau.com/lab/html5/demodragdrop.html

#5


You will need to use Javascript for that.

你需要使用Javascript。