Форум программистов, компьютерный форум, киберфорум
jQuery
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > JavaScript > jQuery
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
0 / 0 / 0
Регистрация: 01.02.2013
Сообщений: 31
1

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

30.06.2014, 13:49. Показов 1203. Ответов 4
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Помогите пожалуйста разобраться, почему когда я создаю блок его можно редактировать только после сохранения и обновления страницы?

Сылка по которой можно просмотреть проект в действии
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">  
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- ----------------------------------------------------------------- -->
<script src="http://threedubmedia.com/inc/js/jquery-1.7.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag.live-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drop-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drop.live-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/excanvas.min.js"></script>
<script type="text/javascript">
jQuery(function($){
 
    $('#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') )
 
    });
    $( document ).on("drag",".drag",function( ev, dd ){
        $( this ).css({
            top: dd.offsetY,
            left: dd.offsetX
        });
    });
 
    $('.drag')
        .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 );
        });
});
</script>
<style type="text/css">
    
.drag {
    position: absolute;
    border: 1px solid #89B;
    background: #BCE;
    height: 58px;
    width: 58px;
    top: 120px;
    cursor: move;
    }
.handle {
    position: absolute;
    height: 6px;
    width: 6px;
    border: 1px solid #89B;
    background: #9AC; 
    }
.NW, .NN, .NE {
    top: -4px;
    }
.NE, .EE, .SE {
    right: -4px;
    }
.SW, .SS, .SE {
    bottom: -4px;
    }
.NW, .WW, .SW {
    left: -4px;
    }
.SE, .NW {  
    cursor: nw-resize;
    }
.SW, .NE {
    cursor: ne-resize;
    }
.NN, .SS {
    cursor: n-resize;
    left: 50%;
    margin-left: -4px;
    }
.EE, .WW {
    cursor: e-resize;
    top: 50%;
    margin-top: -4px;
    }   
.selected {
    background-color: #ECB;
    border-color: #B98;
    }
.selected .handle {  
    background-color: #CA9;
    border-color: #B98;
    }
    
</style>
<!-- ----------------------------------------------------------------- -->
   <script>  
        $(document).ready(function(){  
          
            $('#save').click(function(){  
            var username = $('#username').html();
                $.ajax({  
                    type: "POST",  
                    url: "greetings.php",  
                    data: {username: username}, 
                    success: function(html){  
                        $("#username").html(html);  
                    }  
                });  
                return false;  
            });  
              
        });  
    </script>  
 
<style>
#username
{
min-height: 100%;
 
}
 
</style>
    
</head>  
  
<body>  
 
      <div id="username" contentEditable="true">
      
            <?php
            //get data from database.
            include("db.php");
            $sql = mysql_query("select text from content where element_id='3'");
            $row = mysql_fetch_array($sql);         
            echo $row['text'];
            ?>            
      
      </div>
<input type="button" id="add" value="Add a Box" />
<button id="save">Save</button>
      
      
 
 
 
</body>  
</html>
0
Лучшие ответы (1)
Сообщение: #6380652
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 30.06.2014, 13:49
Ответы с готовыми решениями:

Добавление блоков div, с сохранением существующих
Добрый день, форумчане! Возникла проблема есть следующий css: .Field { text-align: center; }...

Создание редактируемых таблиц или редактируемых полей
Здравствуйте! С помощью каких инструментов можно создавать редактируемые таблицы как в jquery?...

Добавление блоков
Здравствуйте! Перейду сразу к делу. Стоит 2 задачи, которые я не могу решить: 1. Необходимо...

Webbrowser добавление блоков на страницу
Здравствуйте! Как можно добавить блок на страницу? Например &lt;div class=&quot;content&quot;&gt; &lt;div...

4
268 / 268 / 109
Регистрация: 22.08.2013
Сообщений: 907
30.06.2014, 14:19 2
bedrik, обработчик действует только для тех элементов, которые уже были при загрузке страницы.

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

        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'));
        });
Я отформатировал код, привел в порядок табуляцию. Рекомендую не повторять ошибок.
0
0 / 0 / 0
Регистрация: 01.02.2013
Сообщений: 31
30.06.2014, 14:25  [ТС] 3
Цитата Сообщение от Razip Посмотреть сообщение
Я отформатировал код, привел в порядок табуляцию. Рекомендую не повторять ошибок.
Нет, не работает
http://soft.7-dney.com/6/ поменял
0
268 / 268 / 109
Регистрация: 22.08.2013
Сообщений: 907
30.06.2014, 14:44 4
Лучший ответ Сообщение было отмечено bedrik как решение

Решение

bedrik, странно, у меня работало. Сейчас гляну.

Добавлено через 10 минут
bedrik, в click-обработчике ошибочно передавал текущей элемент $(this), а нужно тот, что добавляется:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

        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 () {
                var newElement = $('<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($('#username'));
 
                handleDrag(newElement);
            });
 
            $(document).on("drag", ".drag", function (ev, dd) {
                $(this).css({
                    top: dd.offsetY,
                    left: dd.offsetX
                });
            });
 
            handleDrag($('.drag'));
        });
1
0 / 0 / 0
Регистрация: 01.02.2013
Сообщений: 31
30.06.2014, 14:56  [ТС] 5
ДЯКУЮ)))
0
30.06.2014, 14:56
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 30.06.2014, 14:56
Помогаю со студенческими работами здесь

Добавление контента из блоков в блок
Всем хай. Говорю сразу, мыслю понятиями HTML и хочу узнать как сделать что-то типо этого в C#...

Добавление и удаление блоков на странице
Есть две кнопки на странице: - кнопка добавить блоки, и кнопка удалить блок - клик по кнопке...

Сохранение редактируемых записей в БД
У меня возникла такая проблема, Есть ComboBox в который выгружается из БД 1 столбец и есть 2...

Выделение новых и редактируемых строк в DbGrid
Как выделить добавленную строку в DBGRID одним цветом, а отредактированную - другим. При этом...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru