javascript перетаскивание страниц

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

<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>

Нравиться

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

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

}
}); 

И перетаскиваемый компонент может быть ТЕКСТ или ИЗОБРАЖЕНИЕ, и при перетаскивании вы можете выполнить любую операцию

Большинство ваших целей может быть достигнуто с помощью css 2/3 + немного чистого js

отсечение/маскирование

http://www.html5rocks.com/en/tutorials/masking/adobe/< /а>

свойство преобразования css3 http://www.w3schools.com/cssref/css3_pr_transform.asp

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

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

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

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

UPD: вот вам пример грязного кода (с использованием пользовательского интерфейса jquery) 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);

UPD2: Через пару лет мой пример вообще перестал работать на jsfiddle. Не могу точно сказать, почему, но основной ответ по-прежнему заслуживает доверия.

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

Компонент блока с изменяемым размером: (Редактировать: перетащите 4 маленькие ручки в середине сторон)

Скрипка

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

Скрипка

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

Too much code to put here! Visit the fiddle

Есть полезный плагин 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>

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

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

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

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

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

Отсюда, с html5 и css3, элементами можно управлять с помощью хорошего свойства: 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

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

ОБНОВЛЕНИЕ: я обнаружил, что свойство clip css устарело, теперь это clip-path, но оно работает примерно так же.

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