Hello :)
First sorry for the long post but I think that eventually I would
write all this.
I have a "dynamic table" made solely out of div elements . row looks
like this:
cell, horizontal gutter, cell...
vertical gutter, center gutter, vertical...
this is the cell:
<div id="geppetoCell_r1_c1" class="geppetoCell geppetoContentCell ui-
draggable ui-droppable" contenteditable="" style="border-width: 2px;
overflow: hidden; width: 150px; height: 60px;">text1</div>
geppetoGrid is an object holding the data of the table and redrawing
the table. redraw function generates the table and hooks up cell
handlers.
cells were made editable using the contenteditable attr, i made
focus() and blur() handlers like this:
$(".geppetoCell").focus(
function () {
if(!$(this).hasClass("geppetoSelectedCell")) {
$(this).addClass("geppetoSelectedCell");
}
geppetoGridReference.lastFocusedCellData = $
("#"+this.id).html();
}
);
$(".geppetoCell").blur(
function () {
if($(this).hasClass("geppetoSelectedCell")) {
$(this).removeClass("geppetoSelectedCell");
}
if($(this).text() != "") {
if($(this).hasClass("geppetoEmptyCell")) {
$(this).removeClass("geppetoEmptyCell");
}
$(this).addClass("geppetoContentCell");
} else {
if($(this).hasClass("geppetoContentCell")) {
$(this).removeClass("geppetoContentCell");
}
$(this).addClass("geppetoEmptyCell");
}
geppetoGridReference.modifyCellData(this.id,$
("#"+this.id).html());
}
)
it is functionality for changing the focused/blured cell class (hence
color) and updating the geppetoGrid internal data array.
the next step was to implement the DnD functionality. I added the
droppable and draggable like this:
$(".geppetoCell").draggable({
helper: 'clone',
opacity: 0.50,
//delay:200,
//distance:10,
scroll: true,
//revert:'invalid'
});
$(".geppetoCell").droppable({
accept: ".geppetoCell",
hoverClass: "geppetoDraggableHover",
drop: function(ev, ui) {
tmp = $(this).html();
$(this).empty().html($(ui.helper).html());
$(ui.draggable).empty().html(tmp);
if ($(this).attr("class") != $(ui.draggable).attr("class")){
tmp = $(this).attr("class");
$(this).attr("class",$(ui.draggable).attr("class"));
$(ui.draggable).attr("class",tmp);
}
geppetoGridReference.modifyCellIDs($(ui.draggable).attr("id"),$
(this).attr("id"));
}
});
The achived functionality was indeed DnD, but the cells weren't
editable anymore. I placed a console.log in each handler to see when
they were called, but focus() and blur() weren't called at all.
When I commented the draggable code focus() and blur() were activated.
I tried to modify the delay and distance options in draggable but
that had no effect on focus() and blur().
Finally I've overriden the mouseout and mouseup and achieved the
desired functionality. But I'm not pleased with that solution
because... too much txt here already :))
Is there any way to get the cells focusable, blurable, draggable and
droppable using only these handles? this would be possible if the
draggable handler "forwards" the generated event to focus() handler -
and I don't know how to do that :)
Would you do this in some other way?
tnx for reading :)
