Specifying multiple cancel options on jquery draggable elements

Question

As shown from the diagram above, I only want to allow users to drag the element when they click on the region indicate as "Allow dragging" all other regions do not allow dragging indicated by "disable dragging". The following is the code that i currently have. It works fine only that I am unable to pass more than one selectors to the cancel option. I have tried passing an object and space separated sector but it won't work. What am i doing wrong? Please help.

    $(".e-note").draggable({
        stop: function(e, ui) {
            // alert(ui.position['top']);
        },
        cursor: 'move',
        opacity: 0.4,
        cancel: '.e-note-body', // How do i pass more than one selectors here?
        distance:20
    })

Answer 1

You can provide a multiple selector to combine several selectors:

cancel: '#selector1, .selector-two'

Note the comma (,) separating each selector inside the quotation marks.

Answer 2

Or if you have a complex layout and very many elements that should 'cancel' the drag, you can instead of cancel use handle option:

handle: '.allow_drag_start'

This way you don't need to use cancel at all.

This has an additional con, that I found recently. If your site is using eg. http://touchpunch.furf.com/ to convert mouse-events to touchevents, the cancel really cancels everything, not only drag, but also touch device's native scroll and two-finger pinch zoom. In my case, I wanted scroll and zoom to work on all other elements but the handles.

Generally, I think that handle is the one that should be used and cancel is a bit workaround.