Go to etreecell.com
You can create DIV Object.(Click the "Cell(insert)")
Then, you can select the "create DIV".
(I using fn "$('').live" for reading DOM.)
if you multi select it and move it, work it in FF, Chrome, Opera...
But It doesn't work in IE.
(if you drag for move DIVs, IE is cancle the select object).
HELP ME PLEASE ;;
this is script source.
<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>