Hey - this is great work - I just happened to be looking for this
functionality.
How would you apply what you have done here to re-writing the original
X-library code that uses TDs for the checkbox label?
Thanks!
On Apr 12, 2:04 pm, Ricardo <ricardob...@gmail.com> wrote:
> Sure! I have a few other plugins I also want to upload, I'll do that.
>
> I took the time to rewrite it more carefully. No more binding/
> unbinding, a single var, all namespaced and bugs ironed out (if you
> put the cursor away while holding the button, the mouseover would
> remain active even after mouseup).
>
> The advantage of namespacing is you can easily remove all event
> handlers. I included that in the plugin, in the example you can use $
> ('ul').dragCheck(false) to disable it completely.
>
> http://jsbin.com/amoxi/edit
>
> cheers,
> - ricardo
>
> On Apr 12, 9:48 am, Lwangaman <donjohn.f...@gmail.com> wrote:
>
>
>
> > @Ricardo
> > Do you think it could be useful to add this to the jquery plugins at
> > plugins.jquery.com? I'd say it could be put under your name because
> > you did all the big work!
>
> > On 12 Apr, 14:35, Lwangaman <donjohn.f...@gmail.com> wrote:
>
> > > Ok that works better, I just changed "clicked.checked = !isChecked" to
> > > "clicked.checked = isChecked":
>
> > >http://jsbin.com/idihi/edit
>
> > > On 12 Apr, 08:11, Ricardo <ricardob...@gmail.com> wrote:
>
> > > > The problem with your fix is that the event target for the mouseup is
> > > > not the same as the mousedown. You can resolve that by saving the
> > > > clicked checkbox in a var, and because of event order the change has
> > > > to be made on 'click' rather than mouseup.
>
> > > >http://jsbin.com/asizu/edit
>
> > > > Sorry for the bugs, this was written rather quickly, I hope it works
> > > > now :)
>
> > > > On Apr 11, 11:30 am, Lwangaman <donjohn.f...@gmail.com> wrote:
>
> > > > > Ok I tried to touch up the code a little to fix that, here's my
> > > > > example:
>
> > > > >http://jsbin.com/iyubi/edit
>
> > > > > Now, with a single click, the value on mouseup is reversed to keep it
> > > > > as it was with mousedown. But, when you do a drag, the mouseup of the
> > > > > last checkbox is not canceled or reversed... I suppose it would be
> > > > > enough to cancel $(this)'s mouseup, but how would you refer to $(this)
> > > > > from within the $boxes.bind('mouseover')?
>
> > > > > On 11 Apr, 16:07, Lwangaman <donjohn.f...@gmail.com> wrote:
>
> > > > > > Hmm, just noticed one problem though... A single click on a checkbox
> > > > > > is supposed to work too, but with this code as soon as you mouseup
> > > > > > the
> > > > > > value goes back the other way... You have to drag off in order to
> > > > > > keep
> > > > > > the value in there...
>
> > > > > > On 11 Apr, 06:21, Ricardo <ricardob...@gmail.com> wrote:
>
> > > > > > > I think you already got the .dc namespacing thing, so: the
> > > > > > > mousedown
> > > > > > > is not being bound to the checkbox, but to the container element
> > > > > > > (the
> > > > > > > table, or in my example below, the UL). When you click a checkbox
> > > > > > > the
> > > > > > > mousedown event will bubble up to the container and fire this
> > > > > > > handler.
>
> > > > > > > As I expected my code had some flaws a few typing errors, see it
> > > > > > > fixed/
> > > > > > > working here:
>
> > > > > > >http://jsbin.com/edabo/edit
>
> > > > > > > I added the ability to specify a selector for the checkboxes,
> > > > > > > that way
> > > > > > > you can skip the ones you don't want. In case it's not provided
> > > > > > > all
> > > > > > > checkboxes are used by default.
>
> > > > > > > cheers,
> > > > > > > - ricardo
>
> > > > > > > On Apr 10, 8:17 pm, Lwangaman <donjohn.f...@gmail.com> wrote:
>
> > > > > > > > Ok first of all thanks for taking interest!
> > > > > > > > Then, I've tried going through your code and applying it, and I
> > > > > > > > have a
> > > > > > > > few questions:
> > > > > > > > -- Besides the mouseover.dc that I didn't get either...
> > > > > > > > -- I'm supposing that $boxes would be a variable where all the
> > > > > > > > checkboxes that are applicable have been stored previously?
> > > > > > > > Yet, if
> > > > > > > > you build it as a "plugin" you have no way of defining which
> > > > > > > > checkboxes are to comprised (unless this functionality is built
> > > > > > > > into
> > > > > > > > the plugin using data passed through parameters, I suppose).
> > > > > > > > -- Then I don't quite understand what the "mousedown" is being
> > > > > > > > bound
> > > > > > > > to. In my example (which was not built as a plugin, but I
> > > > > > > > suppose a
> > > > > > > > plugin or defined function would be even better because it's
> > > > > > > > much more
> > > > > > > > flexible and anyone can download it and use it), the
> > > > > > > > "mousedown" was
> > > > > > > > being bound to all the cells that had checkboxes in them, and I
> > > > > > > > was
> > > > > > > > determining that through the class I had given them
> > > > > > > > "mychkbox" (because I didn't want some of the checkboxes
> > > > > > > > included,
> > > > > > > > since they do not have an active state; the table has names,
> > > > > > > > addresses, emails, and those that don't have an email have an
> > > > > > > > inactive
> > > > > > > > checkbox). I was also trying to follow cross-browser.com's way
> > > > > > > > of
> > > > > > > > listening to the mousedown on the cell containing the checkbox
> > > > > > > > rather
> > > > > > > > than on the checkbox itself, making the whole click-drag thing
> > > > > > > > a lot
> > > > > > > > more user-friendly.
>
> > > > > > > > On 10 Apr, 20:36, jay <jay.ab...@gmail.com> wrote:
>
> > > > > > > > > Just curious.. What is the difference between mouseover.dc and
> > > > > > > > > mouseover?
>
> > > > > > > > > On Apr 10, 1:44 pm, Ricardo <ricardob...@gmail.com> wrote:
>
> > > > > > > > > > This (untested) is how I envision the code for that:
>
> > > > > > > > > > $.fn.dragCheck = function(){
> > > > > > > > > > //this == the current jQuery element
> > > > > > > > > > return this.each(function(){
>
> > > > > > > > > > //this == current element in the loop (table etc)
> > > > > > > > > > $(this).bind('mousedown', function(e){
>
> > > > > > > > > > //don't do anything if you didn't click a checkbox
> > > > > > > > > > if ( !$(e.target).is(':checkbox') )
> > > > > > > > > > return true;
>
> > > > > > > > > > //get the clicked checkbox state
> > > > > > > > > > isChecked = e.target.checked;
> > > > > > > > > > //apply it to all other checkboxes on mouseover
> > > > > > > > > > $boxes.bind('mouseover.dc', function(){
> > > > > > > > > > this.checked = isChecked;
> > > > > > > > > > });
>
> > > > > > > > > > }).bind('mouseup', function(e){
> > > > > > > > > > //cancel the mouseover action
> > > > > > > > > > $boxes.unbind('mouseover.dc');
> > > > > > > > > > });
>
> > > > > > > > > > };
>
> > > > > > > > > > $('#table1').dragCheck();
>
> > > > > > > > > > cheers,
> > > > > > > > > > - ricardo
>
> > > > > > > > > > On 9 abr, 17:15, Lwangaman <donjohn.f...@gmail.com> wrote:
>
> > > > > > > > > > > Ok I resolved the "cannot assign to a function result"
> > > > > > > > > > > problem by
> > > > > > > > > > > putting the value assignment into a "function(){}":
>
> > > > > > > > > > > 48 $("td.mychkbox").each(
> > > > > > > > > > > 49 function(){
> > > > > > > > > > > 50 $(this).bind(
> > > > > > > > > > > 51 "mouseover",
> > > > > > > > > > > 52 function(){
> > > > > > > > > > > 53 if (gCheckedValue != null){
> > > > > > > > > > > 54 var eccomi = this;
> > > > > > > > > > > 55 var eccoti =
> > > > > > > > > > > $(eccomi).find("input:checkbox");
> > > > > > > > > > > 56* function(){$(eccoti).attr("checked") =
> > > > > > > > > > > gCheckedValue;}
> > > > > > > > > > > 57 }
> > > > > > > > > > > 58 });
> > > > > > > > > > > 59 });
>
> > > > > > > > > > > Now I don't get any errors, but the event assignments
> > > > > > > > > > > don't seem to be
> > > > > > > > > > > working together correctly...
> > > > > > > > > > > Basically what's supposed to happen is this:
> > > > > > > > > > > 1 - "onclick" event of the checkboxes is canceled since
> > > > > > > > > > > the clicking
> > > > > > > > > > > and dragging is being assigned to the table cells that
> > > > > > > > > > > contain them
> > > > > > > > > > > 2 - the table cells themselves don't actually have on
> > > > > > > > > > > "onclick" event,
> > > > > > > > > > > because the value is given to the checkboxes with the
> > > > > > > > > > > "onmousedown"
> > > > > > > > > > > and especially the "onmouseover" event.
> > > > > > > > > > > 3 - "onmousedown" gives the variable "gCheckedValue" a
> > > > > > > > > > > value, either
> > > > > > > > > > > of "true" or of "false" (depending on the actual state of
> > > > > > > > > > > the
> > > > > > > > > > > checkbox, so if it is unchecked it will get checked and
> > > > > > > > > > > vice-versa),
> > > > > > > > > > > and "onmouseup" empties "gCheckedValue" of any value. So
> > > > > > > > > > > as long as
> > > > > > > > > > > the mouse is down, "gCheckedValue" has a value to give to
> > > > > > > > > > > any of the
> > > > > > > > > > > checkboxes with the "onmouseover" event, but as soon as
> > > > > > > > > > > the mouse
> > > > > > > > > > > button is released it no longer has a value so the
> > > > > > > > > > > "onmouseover" event
> > > > > > > > > > > will no longer effect any of the checkboxes until the
> > > > > > > > > > > mousebutton is
> > > > > > > > > > > pressed again.
>
> > > > > > > > > > > So the value of "gCheckedValue" is set in the "mousedown"
> > > > > > > > > > > event, and
> > > > > > > > > > > is transmitted in the "mouseover" event.
>
> > > > > > > > > > > And yet the code doesn't seem to be working correctly.
> > > > > > > > > > > The current
> > > > > > > > > > > value of the cell is detected correctly (I've gotten it
> > > > > > > > > > > through an
> > > > > > > > > > > alert), it's contrary is correctly set in "gCheckedValue"
> > > > > > > > > > > (I've gotten
> > > > > > > > > > > that through an alert too), but the new value is not
> > > > > > > > > > > being set in the
> > > > > > > > > > > checkbox... In fact click sets no value, click and hold
> > > > > > > > > > > sets no value,
> > > > > > > > > > > click and drag (mouseover the other checkboxes / cells)
> > > > > > > > > > > set no
> > > > > > > > > > > value...
>
> > > > > > > > > > > On 9 Apr, 14:23, Lwangaman <donjohn.f...@gmail.com> wrote:
>
> > > > > > > > > > > > I thought I'd undertake the endeavour of translating
> > > > > > > > > > > > into jquery the
> > > > > > > > > > > > neat little "click-n-drag checkboxes" functionality of
> > > > > > > > > > > > cross-
> > > > > > > > > > > > browser.com's X-library. This functionality allows for
> > > > > > > > > > > > multiple
> > > > > > > > > > > > checkbox selection or de-selection by simply clicking
> > > > > > > > > > > > on one of them
>
> ...
>
> read more »
