锚在mootools中不起作用

Question

I have created a table using mootools sortables to implement drag and drop functionality. Inside my table some of the columns has hyperlink and textboxes.When I click on hyperlink/input box it always calls Sortable's callback like onComplete.

How do I make hyperlink/input Elements working inside Sortable.I have tried to use handle property of Sortable but problem with this property is that it takes only one element.If I have to use multiple columns of of row as handle then what I need to do ?Do I have any hope ?

Thanks in advance.

Answer 1

It's not true you can only use one element as a handle. You can specify a handle by using CSS selectors in the handle option. This then refers relative to the 'sortable' (the element to be sorted).

So suppose within your sortable item (like an <li> html element) your handle is a <span> with the class my-handle , you could do:

var mySortables = new Sortables('#list-1', {
    handle: '.my-handle'
});

I think it's neater to solve it like that, instead of stopping event propagation of events you didn't want in the first place.

Answer 2

I was able to solve the problem by adding following code in domready to prevent event bubbling.

    document.getElements("a").addEvents({
        click: function(e) {
            if (!e) var e = window.event;
                e.cancelBubble = true;
            if (e.stopPropagation) 
                e.stopPropagation();
        }
    });