[jQuery] First Plugin Help
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);