Sortable with In-Line Editing
I'm trying to create a sortable list in which the text is in-line editable. For the sortable, I've of course gone with the jQuery UI sortable plugin. The two in-line editor plugins seem to be "jeditable" and "inplace". Unfortunately, I've been unable to get the sortable to jive with either.
The big problem has been event handling... I want the item to either be dragged (and sorted) or clicked (and edited). Unfortunately, even when an item is dragged, the click event get picked up by the in-line editors with no clean way to disable (as in, I drag and release and now it thinks it wants to be edited). I've managed to work around the issue in this somewhat hacky way for simple clicking:
var dragged = 0;
$("ul#theList").sortable({
start: function() { dragged = 1; }
});
$(".listItem").click(function(ev) {
if (dragged) { dragged = 0; return false; }
alert("clicked");
});
So we capture the dragging and clear via flag, preventing the click if there was a drag. But now I have no way (that I'm aware of) of starting an in-line editing... so kind of the opposite problem.
I guess what I'm asking is if anyone knows of another plugin that will work for my task... or if there's a good way of doing this with the existing plugins that I'm woefully overlooking. The "jeditable" and "inplace" plugins both assume you want to send data to the server as well... I don't need anything quite as complex (I want to handle that manually)... but both allow for a callback instead of sending to the server.
(And being a relative jQuery noob, feel free to beat me with a cluestick... I'm using jQuery 1.6rc5 and jQuery 1.3.)
Thanks!