묻고답하기
jQuery 질문입니다. (3일간 이 문제를 해결못하네요 ㅠㅜ)
2010.11.12 13:55
3일간 아무리 구글링이던 뭘 해도 이 문제가 해결되지 않네요. ㅠ
위 사이트를 들어가시면 유동적으로 DIV를 생성합니다.
여러개 생성된 DIV를 드래그로 여러개 선택해서
같이 움직이려고 합니다.
파이어폭스나 크롬, 오페라에서는 구현이 되는데,
IE에서만 구현이 안됩니다. ㅠㅜ
유동적으로 오브젝트를 생성하면 DOM갱신이 안되어
$('').live를 사용했는데,
힘드네요. ㅠㅜ
부탁드립니다.
어디가 잘못된건가요?;;
아래는 스크립트 소스입니다.
<script type="text/javascript">
$(document).ready(function(){
var counter = 1;
var newCellDiv = $(document.createElement('div'))
.attr("id", 'Cell_' + counter);
newCellDiv.addClass('drag');
newCellDiv.css({
top: Math.floor((Math.random() * ( $(" #container" ).height() - 160 ) + 160)/10)*10,
left: Math.floor((Math.random() * ( $( "#container" ).width() - 200 ) + 40 )/10)*10
});
newCellDiv.html('<input class="cell_text_class" type="text" name="Cell_txt_' + counter + '" id="Cell_txt_' + counter + '" value="'+newCellDiv.attr("id")+'" >');
newCellDiv.appendTo("#container");
$("#container div").removeClass("ui-selected");newCellDiv.addClass("ui-selected");document.getElementById("Cell_txt_" + counter).focus();
counter++;
var newCellDiv = $(document.createElement('div'))
.attr("id", 'Cell_' + counter);
newCellDiv.addClass('drag');
newCellDiv.css({
top: Math.floor((Math.random() * ( $(" #container" ).height() - 160 ) + 160)/10)*10,
left: Math.floor((Math.random() * ( $( "#container" ).width() - 200 ) + 40 )/10)*10
});
newCellDiv.html('<input class="cell_text_class" type="text" name="Cell_txt_' + counter + '" id="Cell_txt_' + counter + '" value="'+newCellDiv.attr("id")+'" >');
newCellDiv.appendTo("#container");
$("#container div").removeClass("ui-selected");newCellDiv.addClass("ui-selected");document.getElementById("Cell_txt_" + counter).focus();
counter++;
$("#addButton").click(function () {
var newCellDiv = $(document.createElement('div'))
.attr("id", 'Cell_' + counter);
newCellDiv.addClass('drag');
newCellDiv.css({
top: Math.floor((Math.random() * ( $(" #container" ).height() - 160 ) + 160)/10)*10,
left: Math.floor((Math.random() * ( $( "#container" ).width() - 200 ) + 40 )/10)*10
});
newCellDiv.html('<input class="cell_text_class" type="text" name="Cell_txt_' + counter + '" id="Cell_txt_' + counter + '" value="'+newCellDiv.attr("id")+'" >');
newCellDiv.appendTo("#container");
$("#container div").removeClass("ui-selected");newCellDiv.addClass("ui-selected");document.getElementById("Cell_txt_" + counter).focus();
counter++;
});
$("#container").selectable({ disabled: false });
$("#container").selectable({ });
$("#container div").live('mouseover', function(){$(this).draggable({grid : [10,10],opacity: 0.5, containment: "#container", scroll: false,
start: function(ev, ui) {
$("#container").selectable({ disabled: true });
//document.getElementById("tn").value = ui.position.top;
//document.getElementById("ln").value = $(this).offset().left;
// offset = $(this).offset();
},
drag: function(ev, ui) {
$(this).is(".ui-selected") || $(".ui-selected").removeClass("ui-selected");
var dt = ui.position.top - $(this).offset().top, dl = ui.position.left - $(this).offset().left;
$(".ui-selected").each( function() {
$(this).css({top: $(this).offset().top + dt, left: $(this).offset().left + dl});
});
},
stop: function() {$("#container").selectable({ disabled: false });
$(this).addClass("ui-selected");
a1 = $(".ui-selected").attr("id");
b1 = $("#" +a1 +" .cell_text_class").attr("id");
document.getElementById(b1).focus();
//alert(a1);
//alert(b1 );
}
});});
</script>
