Javascript перетаскивание страницы

Я собираюсь создать компоновщик страниц формата A4 для перетаскивания. Элементы, которые может содержать этот конструктор, - это изображения и текстовые поля.

Я за некоторыми советами о том, какие рамки доступны, которые можно использовать для создания этого типа интерфейсных функций.

Пример того, что мне нужно, см. здесь canva.com

До сих пор две рамки, которые я пробовал, - это fabric js и greensock draggable, которые не соответствовали моим потребностям или довольно сложно создать полный построитель страниц.

В идеале я не хочу использовать холст для этого.

изменить: Основная функция:

  • кадрирования
  • вращение
  • изменение размера
  • изменить стиль шрифта/цвет/размер для текстовых полей
  • добавить фоны
  • фреймы/маскирующие изображения (квадратное изображение может стать звездой с наложением)

ОТВЕТЫ

Ответ 1

Ну, большинство ваших целей можно достичь css 2/3 + некоторые чистые js

вырезка/маскирование

http://www.html5rocks.com/en/tutorials/masking/adobe/

изменить размер, изменить стиль шрифта/цвет/размер для текстовых полей, добавить фонов

чистый js/css2

вращение

свойство css3 transform http://www.w3schools.com/cssref/css3_pr_transform.asp

перетаскивания

Можно легко сделать, используя чистые js или вы можете попробовать некоторые плагины с открытым исходным кодом или что-то вроде jquery draggable.

Что касается вашего текущего списка, я фактически не вижу, почему вы хотите создать какую-то инфраструктуру для этого, когда большинство из них может быть достигнуто с помощью чистого js/css с небольшим усилием /googling.

В моем скромном мнении, jquery или что-то подобное - это все, что вам действительно нужно. Просто проверьте раздел jquery "взаимодействия" здесь https://jqueryui.com/draggable/, чтобы узнать, может ли он помочь вам в построении интерфейса вашего строителя. Существуют различные примеры для каждого взаимодействия (правая боковая панель).

UPD: Вот вам пример грязного кода (с использованием jQuery UI) http://jsfiddle.net/tbpxnxrm/2/. Дважды щелкните в #main, чтобы создать дополнительные элементы. Не выполняются проверки на столкновение/перекрытие, раздвоенные из http://jsfiddle.net/4Vfm5/1095/

drag_defaults = {grid: [50,50], containment: "parent"};
resize_defaults = {
    aspectRatio: true,
    handles: 'ne, se, sw, nw',
    grid: [50,50],
    minHeight: 50,
    minWidth: 50
}

$('.draggable').draggable(drag_defaults);
$('.resizable').resizable(resize_defaults);

Ответ 2

По моему мнению, вы хотите создать панель управления, которая может быть настроена. Я бы предложил использовать структуру таблицы Слияние и разделение таблицы, в которой каждая ячейка должна иметь компонент с возможностью добавления, например

<table id="mainTable">
                    <tbody>
                        <tr>
                            <td class="set-as-droppable"></td>
                            <td class="set-as-droppable"></td>
                            <td class="set-as-droppable"></td>
                            <td class="set-as-droppable"></td>
                        </tr>
                        <tr>
                            <td class="set-as-droppable"></td>
                            <td class="set-as-droppable"></td>
                            <td class="set-as-droppable"></td>
                            <td class="set-as-droppable"></td>
                        </tr>
                    </tbody>
                </table>

Как

Затем на drop напишите свою собственную логику

$( ".set-as-droppable" ).droppable({
        accept: "div.Dragable",
        drop: function( event, ui ) {

}
});

И перетаскиваемый компонент может быть TEXT или IMAGE, а при нажатии вы можете выполнить любую операцию

Ответ 3

Я пытался реализовать это в свое свободное время, но это не то, что можно сделать с нуля, используя чистые js через пару часов после. Пока у меня есть прототип плагина jQuery для удаления новых элементов dom в область страницы. Я также экспериментировал с созданием любого блочного компонента на странице, изменяемой по размеру. За несколько часов, которые я вложил в это, у меня был некоторый успех.

Изменчивый компонент блока: (Edit: перетащите 4 маленьких ручки в середине сторон)

Fiddle

Прототип компоновщика страниц с меню и областью сброса (только текстовый элемент можно отбросить):

Fiddle

Я буду постоянно обновлять скрипты, когда буду работать над этим, но в ближайшее время у меня не будет готового плагина.

Too much code to put here! Visit the fiddle

Ответ 4

Для вращения есть полезный плагин jquery. Ваш код:

<div id="product">

<img src="images/01.jpg" />

<img src="images/02.jpg" />

<img src="images/03.jpg" />

<img src="images/04.jpg" />

<img src="images/05.jpg" />

</div>
<script type="text/javascript">

jQuery(document).ready(function() {

    jQuery('#product').j360();

});

</script>

Это должно работать.

Ответ 5

Я думаю, вы не можете сделать это только с одной структурой, если ваша цель - сделать ее максимально простой.

Если я хорошо понимаю, то, что вы хотите сделать, - позволить пользователю вашего приложения сделать какой-то продвинутый "рисунок", сделанный непосредственно в браузере.

Сначала: без элемента canvas их работы должны быть экспортированы/созданы на стороне сервера.

Теперь лучшим способом сделать это будет иметь объект javascript, который представляет каждый документ и его содержимое, включая модели и каждый из свойств, таких как положение, описание вращения. И этот объект должен быть визуализирован, чтобы свойства css и html-элементы соответствовали структуре объекта. То есть AngularJS будет моим первым выбором, поскольку он автоматически отслеживает ваши модели и отображает целевой элемент в реальном времени, как только ваш объект будет изменен. (Angular 2 лучше, но только задокументировано в TypeScript и Dart)

Отсюда, с html5 и css3, элементы можно манипулировать с помощью свойства nice: transform. Он принимает значения, такие как "translateX (10px)" или "rotateZ (10deg)". Чтобы узнать больше об этом: http://www.w3schools.com/cssref/css3_pr_transform.asp.

Кроме того, для перетаскивания вещей: http://www.w3schools.com/html/html5_draganddrop.asp.

Чтобы обрезать изображение, вы должны использовать серверный код. (пример с php: http://php.net/manual/fr/function.imagecrop.php)

Чтобы играть с масками на изображениях, есть также свойства css3, которые хорошо работают: http://www.w3schools.com/cssref/pr_pos_clip.asp

И для связи между вашим приложением и сервером используйте функции jQuery: http://api.jquery.com/category/ajax/.

Наконец, выберите, что вы хотите от css3: http://www.w3schools.com/css/css3_intro.asp. http://www.w3schools.com/css/css3_images.asp

Надеюсь, это вам поможет. Удачи!

UPDATE. Я обнаружил, что свойство css для клипов устарело, теперь это клип-путь, но он работает примерно одинаково.

ОБНОВЛЕНИЕ 2: на самом деле маски (с изображениями, а не с помощью путей) могут быть сделаны с помощью свойства mask css: https://developer.mozilla.org/en-US/docs/Web/CSS/mask. Но будьте осторожны, он все еще частично поддерживается http://caniuse.com/#search=mask.