Question

I have a problem while using the Sortables() function (Mootools library).

    this.sort=new Sortables(this.box,{
        onStart: function(el){el.setStyles({'background':'#f0f0f0','opacity':1});},
        onComplete: function(el){el.setStyle('background','none');this.setEditor();}.bind(this)
    });

In fact, I have a DIV, which contains other DIV blocks which should be made sortable. And the 2nd level DIVs have SELECT tags inside.

The problem is these dropdown list does not drop when clicked. The click just falls to the parent DIV element and onStart functions starts. How can this problem be solved?

The prototype: http://jsfiddle.net/uCM2R/3/

Answer 1

mootools 1.12? heh.

right. so basically you want a click on the dropdown not to trigger the sort? this will be tricky as it uses a delegated event on the parent and it bubbles. also, scripting click events on a select is not reliable either so you cant stop the click event from propagating reliably – at least in 1.12. 1.3.2 is fine.

consider using the handles: "div.foo" option on the select whereby thats a child div that allows them to move things as opposed to the whole div.

http://jsfiddle.net/dimitar/uCM2R/4/

obviously in the div.foo handle you can put some icons that indicate moving. only they will act as the drag point for sorting, thus enabling you to work with selects w/o interference.

here it is in 1.3.2 as per your original spec/markup: http://jsfiddle.net/dimitar/uCM2R/6/

added a click handler for selects that stops the bubbling.