rooivalk rooivalk -4 years ago 108
jQuery Question

jquery draggable prevent firing selectable using click

I'm trying to combine the lovely couple of JQueryUI's draggable and selectable ;)

What I'm trying to do:


  • Divs could be selected using click. That would be displayed by applying... maybe css border/shadow to selected div. Just to highlight it.

  • The same divs could be dragged using JQueryUI's draggable.



using a portion of ryan coughlin's code, I made this code:
http://jsfiddle.net/rYgXE/

Mostly okay. The problem is, The divs could no longer be highlighted (css shadow in this case) using CLICK. only DRAG trigger highlight to the divs. The running sample of ryan coughlin's code also couldn't be selected (highlighted) using click.

I don't really understand what happen, but it seems that draggable code prevent selectable code from working.

any solution/idea?

thx :D

Answer Source

you just need to add this function

$(".selectable div").click(function() {
    if (!$(this).hasClass("ui-selected")) {
        $(this).addClass("ui-selected").siblings().removeClass("ui-selected");
    }
})

here is a working fiddle http://jsfiddle.net/rYgXE/2/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download