Could someone help me with the following, I'm just learning jquery and I had this working with a global variable (I know, bad, but I'm just learning). I have 4 draggable elements and $this.html(topZIndex); is only incrementing and displaying in the last one when I mouse over any of the 4 elements (can be seen here - http://www.iamcorbin.net/tEsT/test.php (click the drag button to turn it green first, only the gray box will change on mouseenter). I know this is a problem with my scope, and can be fixed easily, I'm just not sure what I'm doing wrong. Please Help.
(function($){ $.fn.draganSort = function(options) { var opts = $.extend({}, $.fn.draganSort.defaults, options); return this.each(function() { $this = $(this); //make draggable $this.draggable({ containment: opts.container, ghosting: opts.ghost, opacity: opts.opac }); //set initial zIndex of draggable element $this.css('zIndex','300'); //hold the current top element Zlocation var topZIndex = 0; $this.mouseenter(function(){ //place element on top var divZIndex = $this.css('zIndex'); if($this.css('zIndex') > topZIndex) topZIndex = $this.css('zIndex'); ++topZIndex; $this.html(topZIndex); $this.css('zIndex',topZIndex); }); //end mouseenter }); }; /*not sure how to implement yet, fixing above first $.fn.draganSort.destroy = function(){ $this = $(this) $this.draggable('destroy'); $this.unbind('mouseenter'); };*/ $.fn.draganSort.defaults = { container: 'parent', ghost: true, opac: 0.7 }; })(jQuery);