I have a strange bug concerning the jQuery UI selectable. If I use a transform (scale + translate) within the selectable container, the lasso seems to be incorrect for selecting objects. Visually the lasso works perfecly!
Here is my coding example: Fiddle
Working case:
Not working case:
Apparently this is a limitation of jQuery UI who is disregarding CSS-transformations in functions like offset(). In jQuery UI I found the part of the selectable where the calcualtion is being made for selecting items, but I can't seem to adjust it in a correct way:
_create: function() {
var that = this;
this._addClass( "ui-selectable" );
this.dragged = false;
// Cache selectee children based on filter
this.refresh = function() {
that.elementPos = $( that.element[ 0 ] ).offset();
that.selectees = $( that.options.filter, that.element[ 0 ] );
that._addClass( that.selectees, "ui-selectee" );
that.selectees.each( function() {
var $this = $( this ),
selecteeOffset = $this.offset(),
pos = {
left: selecteeOffset.left - that.elementPos.left,
top: selecteeOffset.top - that.elementPos.top
};
$.data( this, "selectable-item", {
element: this,
$element: $this,
left: pos.left,
top: pos.top,
right: pos.left + $this.outerWidth(),
bottom: pos.top + $this.outerHeight(),
startselected: false,
selected: $this.hasClass( "ui-selected" ),
selecting: $this.hasClass( "ui-selecting" ),
unselecting: $this.hasClass( "ui-unselecting" )
} );
} );
};
this.refresh();
this._mouseInit();
this.helper = $( "<div>" );
this._addClass( this.helper, "ui-selectable-helper" );
},
Did anyone experience this issue before? Is there a fix, workaround or core adjustment known?
