Перемещение элементов DOM
нужно перемещать некий div, из одной ветки DOM в другую (тобиш тупа из одного td в td другой таблицы, да и вообще пофиг куда :lol: ), при этом все ссылки на этот div, а также обработчики должны сохранится.
Тоже самоё но более развёрнуто. Я использую JavaScriptMVC. то есть на перемещаемом DIV висит контроллер, и если я перемещу Div в другой контейнер, то контроллер должен остаться приклеенным. есть CLONE конечно, но она клонирует а мне надо бы переместить. |
appendChild/inserBefore
|
Цитата:
Вроде должно подойти, спасибо. |
detach, append, appendTo, clone(true)... тысячи их))
|
а я не глянул на раздел
|
|
Цитата:
|
Цитата:
|
точно, jquery же.. тоже не глянул раздел
ну тогда просто (пример) $(el).detach().appendTo( anotherEl ); ----- Цитата:
|
Цитата:
думаю inserBefore более чем достаточно. |
в jquery обработчики событий для этого элемента сохраняются, если использовать detach
|
Цитата:
|
appendChild перемещает элемент, а не создает новый, поэтому все обработчики и атрибуты никуда не пропадают, элемент-то все тот же, просто на новом месте. Демонстрация:
<style>
.label {clear: both; font-family: Verdana; font-size: 12px;}
#test {width: 15px; height: 15px; background-color: darkseagreen; border: 1px #444 solid;}
.cont {width: 50px; height: 50px; border: 1px #555 solid; margin: 10px 10px 0 0; float: left; padding: 5px;}
.cont1 {background-color: #ddd;}
.cont2 {background-color: #ddd;}
</style>
<div class="label">Click on the green square.</div>
<div id="cont1" class="cont cont1">
<div id="test" title="Click me!"></div>
</div>
<div id="cont2" class="cont cont2"></div>
<script>
document.getElementById('test').addEventListener('click', function() {
var newParent = this.parentNode.id == 'cont1' ? 'cont2' : 'cont1';
document.getElementById(newParent).appendChild(this);
}, false);
</script>
|
Цитата:
<style>
p{text-align:center;height:25px;margin:0;border:1px solid #000}
</style>
<div id="hover">
<p><input type="button" value="recolor"></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<script>
var input = document.getElementsByTagName('input')[0];
document.getElementById('hover').onmouseover = function(e){
var t=e?e.target:window.event.srcElement;
if(t.tagName=='P'&&!t.firstChild)t.appendChild(input);
}
input.onclick = function(){this.parentNode.style.backgroundColor = 'rgb('+Math.floor(Math.random()*256)+',0,0)'}
</script>
Т.е. можнро навешивать обработчики без привязки к конкретному элементу. Хотя это и черевато.) |
| Часовой пояс GMT +3, время: 09:34. |