JQuery UI draggable collision - IE not working

Does anyone know if jquery-ui-draggable-collision supports IE?

I'm trying to put the examples that come with it ( jquery-ui-draggable-collision-prevent-example.html ) and I get the following error in IE8:

"Object does not support property or method" in 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


source to share

2 answers

Finally i found work, there is some function missing in IE8 for Array object, map () function is the one used when jquery collision, so I added that map function is added to Array object, I toke this code from JavaScript library ddr-ECMA5:

        var __isCallable = (function(){
        var __sortCase = (function(){
                try {
                    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 {
                    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


This has the side effect of adding an extra element to your array, the "map" function, i.e .:

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


Hope this helps, if anyone else wants to maintain the jquery-collision lib on IE8, this is not the best approach, but it is a good job.



MSIE <9 do not support map () function on arrays. Since this is a jQuery extension, I think the easiest way to solve it is to replace the calls to array.map()

in the extension with jQuery.map()

or $.map()

, for example:


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


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

and you're good to go.



All Articles