Изображения как перетаскиваемые элементы ввода?

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, теней и эффектов градиента позволит вам получить очень приятный тип визуального стиля «кусочек пазла» в способных браузерах и будет намного быстрее и проще в обслуживании, посколькувам не нужно заново создавать изображения, когда вы хотите изменить размер модуля.Возможно, вам понадобится добавить небольшой элемент 'marker' (просто <span class="jigsawMale"> или <span class="jigsawFemale">), чтобы пометить точки "snap".

Правильно - так что ваш HTML и CSS в основном сделаны.Далее вам нужно перетащить и щелкнуть.Я бы пошел на JQueryUI здесь.Это наименее болезненная настройка, и она должна работать в различных браузерах.

Проверьте эту демонстрацию: http://jqueryui.com/demos/draggable/#snap-to

Итак, ваш контрольный список будет (по порядку)

1. Получите ваш HTML для работы ваших форм
2. Создайте свой CSS, чтобы ваши визуальные элементы выглядели правильно (пока не беспокоясь об изображениях)
3. Установите jQuery и jQuery UI и подтвердитеони работают
4. Примените перетаскиваемое и настраиваемое поведение к модулям формы
5. Проверьте все
6. Настройте визуальные стили, чтобы сделать его красивым!

Надеюсь, это поможет!Это довольно сложный элемент пользовательского интерфейса, который вы пытаетесь построить здесь - надеюсь, это разбивает его на управляемые куски.Удачи!