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

Question

嵌入图像中的输入元素

在网络浏览器中

• 我希望

  允许图像嵌入输入元素。

• 允许在容器内拖动这些图像

• 以制作这些图像具有足够的自我意识，当彼此靠近时，它们“对齐”在一起

示例：屏幕转储/视频

这里有一个屏幕转储，说明了我想要的类型： https://i.sstatic.net /j5oPj.jpg 。

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

我们可以这样做吗？

有哪些方法可以将图像“包裹”在 HTML/JS 中的输入元素周围？

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

Answer 1

好的 - 这不会是一个完整的、端到端的答案，但它应该为您提供构建块。

对于初学者来说，您不需要闪存或任何其他第三方东西。 HTML、CSS 和 Javascript 将满足您所需的一切。

好的，让我们看看“具有嵌入输入的图像”要求。您所描述的实际上只是表单输入周围元素的特定视觉样式。 HTML 有一个特定的元素用于此目的 -

。字段集是块元素，可以给定背景图像（设置您想要的图像）、宽度、高度等。

我会使用这样的东西：

<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 边框半径、阴影和渐变效果将允许您在有能力的浏览器中获得非常漂亮的“拼图”类型的视觉样式，并且速度更快且更容易维护，因为当您想要重新调整大小时，您不需要重新创建图像。模块。您可能需要添加一些“标记”元素（只是 或 ）标记“捕捉”点。

是的 - 这样您的 HTML 和 CSS 就基本完成了。接下来，您需要拖动和捕捉。我会在这里选择 jQueryUI。它的设置过程最简单，并且应该可以在多种浏览器中运行。

查看此演示：http://jqueryui.com/demos/draggable/#snap-to< /a>

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

1. 让你的表单工作的 HTML
2. 构建你的 CSS 以使你的视觉效果看起来正确（还不用担心图像）
3. 安装 jQuery 和 jQuery UI 并确认它们正在工作
4. 应用表单模块的可拖动和可捕捉行为
5. 测试一切
6. 调整您的视觉样式，使其美观！

我希望这有帮助！这是您尝试在此处构建的相当复杂的 UI 部分 - 希望这可以将其分解为可管理的块。祝你好运！