Добавление редактируемых блоков - jQuery - Ответ 6380590

@Razip · 30.06.2014, 14:19

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

Javascript

        jQuery(function ($) {
            function handleDrag(elements) {
                elements.each(function() {
                    $(this).click(function () {
                        $(this).toggleClass("selected");
                    }).drag("init", function () {
                        if ($(this).is('.selected')) {
                            return $('.selected');
                        }
                    }).drag("start",function (ev, dd) {
                        dd.attr = $(ev.target).prop("className");
 
                        dd.width = $(this).width();
                        dd.height = $(this).height();
                    }).drag(function (ev, dd) {
                        var props = {};
 
                        if (dd.attr.indexOf("E") > -1) {
                            props.width = Math.max(32, dd.width + dd.deltaX);
                        }
 
                        if (dd.attr.indexOf("S") > -1) {
                            props.height = Math.max(32, dd.height + dd.deltaY);
                        }
 
                        if (dd.attr.indexOf("W") > -1) {
                            props.width = Math.max(32, dd.width - dd.deltaX);
                            props.left = dd.originalX + dd.width - props.width;
                        }
 
                        if (dd.attr.indexOf("N") > -1) {
                            props.height = Math.max(32, dd.height - dd.deltaY);
                            props.top = dd.originalY + dd.height - props.height;
                        }
 
                        if (dd.attr.indexOf("drag") > -1) {
                            props.top = dd.offsetY;
                            props.left = dd.offsetX;
                        }
 
                        $(this).css(props);
                    });
                });
            }
 
            $('#add').click(function () {
                $('<div class="drag" style="left:20px;">    <div class="handle NE"></div>   <div class="handle NN"></div>   <div class="handle NW"></div>   <div class="handle WW"></div>   <div class="handle EE"></div>   <div class="handle SW"></div>   <div class="handle SS"></div>   <div class="handle SE"></div></div>')
                        .appendTo(document.getElementById('username'));
 
                handleDrag($(this));
            });
 
            $(document).on("drag", ".drag", function (ev, dd) {
                $(this).css({
                    top: dd.offsetY,
                    left: dd.offsetX
                });
            });
 
            handleDrag($('.drag'));
        });

Я отформатировал код, привел в порядок табуляцию. Рекомендую не повторять ошибок.

Вернуться к обсуждению:
Добавление редактируемых блоков jQuery

Следующий ответ

Другие темы раздела
jQuery Highstock https://www.cyberforum.ru/ javascript-jquery/ thread1219779.html не могу заставить работать range selector	jQuery Вызов функции не происходит Почему-то не вызывается click по not_more, при этом click по read_more работает безотказно. В чем ошибка и как сделать, чтобы работало. $(".answer_item_text").each(function(){ var max_length = 50; //в переменной устанавливается максимальное количество символов в блоке. var review_full = $(this).html(); var review = review_full; if( review.length > max_length ) { review =...
jQuery Установить атрибут placeholder в input type=text Всем привет!:) имеется <input type = "text" name = "name" /> и <input type = "button" name = "button" /> как сделать так, чтобы при нажатии на кнопку button установился атрибут placeholder, то есть подсказка с текстом "Введите Ваше имя..." в <input type = "text" name = "name" /> помогите пожалуйста с кодом? спасибо. https://www.cyberforum.ru/ javascript-jquery/ thread1219532.html	jQuery Как реализовать автоматическое продление таймера? Есть готовый таймер для акций на Jquery, клиент захотел чтобы акция длилась 3 дня, после чего снова на 3 дня продлилась и так в цикле... Прошло 3 дня + 3 дня ... (прошло дня) + 3 дня. Вот сайт ukr.simvolika.net Спасибо, буду признателен очень. https://www.cyberforum.ru/ javascript-jquery/ thread1219474.html
Применить important стиль через функцию .css() jQuery Здравствуйте. Пытаюсь применить так: $('.slider .bx-wrapper:nth-child(2) .bx-viewport').css('overflow', 'hidden !important'); Но не получается.. Стиль применяю для тупого ie8 ... Там обязательно должен быть important. Не подскажете как его применить правильно?	jQuery Добавить css к элементу $('td', nRow).css({'background-color':'#FFFF00','color':'#FF0000'}); так работает все замечательно, но не могу втыкнуть как передать несколько свойств через переменную? var str="'background-color':'#FFFF00','color':'#FF0000'"; $('td', nRow).css({str}); $('td', nRow).css("{"+str+"}"); это все не рабочие варианты. Добавлено через 12 минут https://www.cyberforum.ru/ javascript-jquery/ thread1218938.html
jQuery Ajax загрузка файлов https://www.cyberforum.ru/ javascript-jquery/ thread1218925.html Есть код, которые после перетаскивания файла на DIV закачивает его на сервак. Помогите сделать, чтобы после выбора через «Выбор файла» выполнялась такая же функция, как через drag'n'drop Input и onChange уже сделал. Но надо заставить работать:) Видимо, надо привязать события onChange к input, только не знаю, в каком формате надо передавать переменную files Спасибо! <html> <head>...	jQuery Как упростить парсинг\обработку полученного JSON после AJAX запроса $(document).ready( function () { $.ajax({ type: 'GET', url: 'http://localhost:1950/service.svc/players', dataType: 'json', success: function (json) { $("#par").html(""); $.each(json, function (i, v) { var age = JSON.stringify(v.Age);
jQuery Автоперелистывание слайдера https://www.cyberforum.ru/ javascript-jquery/ thread1218887.html Здравствуйте. Имеется готовый исходник слайдера, но отсутствует или отключена функция автоперелистывания слайдов. Помогите решить вопрос. Заранее спасибо.	jQuery Динамическое изменение переменной LESS https://www.cyberforum.ru/ javascript-jquery/ thread1218819.html Хай! Вот так я меняю переменную с помощью jquery: less.modifyVars({'@color': value}); - работает с багом! Изменяя переменную с less файле, помощью jquery, у меня появляется бага, конкретнее: все адреса что есть в файле style.less, типа background: url('../img/image.png'), после изменения переменной, становятся вида: background: url(image.png). Вот и вся проблема) Кто то сталкивался или может...
Присвоение элементу значения через jQuery jQuery Имеется скрипт <script type="text/javascript"> $(function() { $(window).scroll(function(){ if ($(window).scrollTop() < 200) $('#slidebox').animate({'left':'-100px'},100) else $('#slidebox').stop(true).animate({'left':'-370px'},100); });	jQuery Нарисовать слайдер (ползунок) Подскажите, кто сталкивался, как нарисовать ползунок(слайдер) вот как на картинке? Или прмерно как на картинке?! Или чтобы хоть на подобе!? https://www.cyberforum.ru/ javascript-jquery/ thread1218662.html

	30.06.2014, 14:19