jQuery UI draggable collision - IE doesn't work

Question

Does anybody knows if jquery-ui-draggable-collision supports IE??

I am trying one the examples that comes with it(jquery-ui-draggable-collision-prevention-example.html), and I am getting the following error on IE8:

"Object doesn't support property or method" on file jquery-ui-draggable-collision-1.0.1.js line 219.

function jqList2CenterGravity( jqList, dx, dy )
{
219:  return centerGravity( jqList.toArray().map( function(e,i,a){ return jq2Coords($(e),dx,dy); } ) );
}

It seems the map() function is not supported in IE8.

I also tried to run it with the latest jquery-1.7.2 and jquery-ui-1.8.18 and I still get the same error.

of course the examples run like a charm on Crome, FireFox and Safari

Answer 1

MSIE < 9 do not support the map() function on arrays. Since this is a jQuery extension, I think the simplest way to solve it is by replacing the calls to array.map() in the extension with jQuery.map() or $.map(), like so:

Replace

var result = myarray.map(function() {});

with

var result = $.map(myarray, function() {});

and you're good to go.

Answer 2

Finally I found a work around, IE8 is missing some function for the Array object, the function map(), is the one used by jquery collision, so what I did I added the map function into my Array object, I toke this code from ddr-ECMA5 JavaScript library:

        var __isCallable = (function(){
        var __sortCase = (function(){
                try {
                    [].sort('abc');
                    return false;
                } catch(ex) {
                    return true;
                }
            })();

        return function(obj){
            if( typeof obj === 'function' )
                return true;
            if( typeof obj !== 'object' )
                return false;
            if( obj instanceof Function || obj instanceof RegExp )
                return true;
            if( __sortCase ) {
                try {
                    [].sort(obj);
                    return true;
                } catch(ex){ /* nothing to do */ }
            }
            return false;
        };
    })();

    /// IE8 support
    var AddArrayMapFunction = function() {
        var $AP = Array.prototype;

        $AP.map || ($AP.map = function(callback) {
            if( !__isCallable(callback) )
                throw new TypeError( callback + " is not a callable object" );

            var thisArg = arguments[1],
                len = this.length,
                results = new Array(len);
            for(var i=0; i < len; ++i) {
                if( this.hasOwnProperty(String(i)) ) {
                    results[i] = callback.call(thisArg, this[i], i, this);
                }
            }

            return results;
        });
    }
// then just call, when you need to use the collision lib
AddArrayMapFunction();

That has a side effect, it adds an extra element into your array, the function "map", i.e.:

myArray = ["a","b","c"];
// after add the function map() your array will look like
["a","b","c",map:function(){...}]

I hope this helps if anybody else wants to support the jquery - collision lib on IE8, it is not the best approach, but is a good work around.