简体繁体 English

HTML5拖放测验

[英]HTML5 Drag and Drop for Quiz

原文 2013-04-23 08:07:01 0 1 javascript/ html5/ drag-and-drop

I'm making web-based quiz to help some people get some qualifications. 我正在进行基于网络的测验，以帮助某些人获得一些资格。 After recently discovering the wonderful world of HTML5 (I've been previously programming in XHTML), I thought the ability to drag and drop a picture from a start box to an answer box would be a great addition to break up the monotony of lists, radio buttons, and textboxes. 在最近发现了HTML5的奇妙世界之后（我以前曾在XHTML中进行过编程），我认为将图片从开始框拖放到答案框的功能将是打破列表单调性的绝佳选择，单选按钮和文本框。

I do not have access to PHP or JQUERY. 我无权访问PHP或JQUERY。 (The site is meant to run on a box with no internet, nor do I have access to setup a web server to support PHP). （该站点旨在在没有互联网的盒子上运行，也无权设置支持PHP的网络服务器）。

Is it possible, using JavaScript and four boxes/divs (one for the start position and three possible answer boxes), to determine which box/div the image is in? 是否可以使用JavaScript和四个box / div（一个用于起始位置，三个可能的答案框）来确定图像位于哪个box / div中？

Thank you very much! 非常感谢你！

1 个解决方案

You can download jQuery ( http://jquery.com/download/ ) and jQuery UI ( http://jqueryui.com/download/ ) and add them to your page as a script 您可以下载jQuery（ http://jquery.com/download/ ）和jQuery UI（ http://jqueryui.com/download/ ）并将它们作为脚本添加到您的页面中

then take a look at draggable and droppable on the jQuery UI docs : http://jqueryui.com/droppable/ 然后看看jQuery UI文档上的可拖动和可拖放： http : //jqueryui.com/droppable/