Question

图像中嵌入的输入元素

在我想要的网络浏览器中

允许图片在其中包含嵌入输入元素。
允许这些图片在容器内拖动
让这些图片充分自我感知，当彼此靠近时，他们“强烈地”对齐

示例：屏幕转储/视频

这里有一个屏幕转储，它说明了我喜欢的类型：http://imgur.com/WMDC8。

为了更好地说明这里有一个视频（打开你的声音）：http://www.screencast.com/t/4BaLMzHK。

我们可以这样做吗？

有什么方法可以在HTML / JS中围绕输入元素“包裹”图像？

（我不想使用：Flash; Java或Silverlight，但如果这是唯一的方法，我会对此持开放态度）。

Answer 1

好的 - 这不是一个完整的，端到端的答案，但它应该给你构建块。

对于初学者，您不需要闪光灯或任何其他第三方的东西。 HTML，CSS和Javascript将完成您所需的一切。

好的，让我们看看'带嵌入式输入的图像'要求。您所描述的实际上只是围绕表单输入的元素的特定视觉样式。 HTML有一个特定的元素 - <fieldset>。场集是块元素，可以给出背景图像（设置你想要的图像），宽度，高度等。

我会用这样的东西：

<fieldset class="formModule moduleTypeA">
   <label for="controlTime">Wait</label>
   <input type="text" id="controlTime" name="controlTime" value="5"/>
   <label for="controlTime">seconds</label>
</fieldset>

这些字段集中的每一个都将成为可拖动的“模块”。样式应该足够简单 - 类似于：

fieldset.formModule {
   display:block; /* Not sure if this is strictly required - fieldsets have some funny default styles in some browsers, so I'm just playing it safe */
   width: 200px;
   height: 180px;
   padding: 10px;
   background: transparent url(formModule.png) no-repeat center center;
}

使用附加类可以改变您使用的模块类型：

.moduleTypeA {
   width:250px;
   height:120px;
   background-image: url(formModuleA.png);
}

.moduleTypeB {
   width:160px;
   height:200px;
   background-image: url(formModuleB.png);
}

就我个人而言，我会尝试不使用图像 - 使用标准背景颜色，加上CSS3 border-radius，阴影和渐变效果可以让你在有能力的浏览器中获得非常漂亮的“拼图”类型的视觉风格，以及更快，更容易维护，因为当您想要重新调整模块大小时，您不需要重新创建图像。您可能需要添加一个“标记”元素（仅<span class="jigsawMale">或<span class="jigsawFemale">）来标记“捕捉”点。

是的 - 这就是你的HTML和CSS大部分完成了。接下来，您需要拖动和捕捉。我在这里去寻找jQueryUI。设置起来最不痛苦，应该可以在各种浏览器中使用。

检查此演示：http://jqueryui.com/demos/draggable/#snap-to

所以，你的清单将是（按顺序）

获取表格的HTML
构建您的CSS以使您的视觉效果正确（不用担心图像）
安装jQuery和jQuery UI并确认它们正在运行
将draggable和snappable行为应用于表单模块
测试一切
调整您的视觉风格，使其美丽！

我希望有所帮助！这是一个相当复杂的UI，你试图在这里构建 - 希望这可以将其分解为可管理的块。祝好运！

图像作为可拖动的输入元素？

图像中嵌入的输入元素

示例：屏幕转储/视频

我们可以这样做吗？

1 个答案: