Cool javascript sliding boxes

Doing a side project with Rails 3.1 and knowing that there must be
something possibly already a gem but possibly simply jquery (or another
javascript methodology but have already started with jquery) that will
have something like a bunch of boxes that I can populate with an array
from one model to slide to an array from another model for has_many =>
has_many relationships (as opposed to boring drop-down selections)

ie

People (names) Host (members)
±-------+ ±-------+
| User 1 | | User 3 |
±-------+ ±-------+

±-------+
| User 2 |
±-------+

so I can drag and drop ‘User 1’ onto Host[“members”] to add or drag it
out to remove.

I’ve been searching various terms on Google [‘rails’, ‘jquery’,
‘javascript’, ‘boxes’, ‘slide’] and not finding anything. Can anyone
toss me a bone here?


Craig W. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[email protected]
1.800.869.6908 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
www.ttiassessments.com

Need help communicating between generations at work to achieve your
desired success? Let us help!

have something like a bunch of boxes that I can populate with an array
from one model to slide to an array from another model for has_many =>
has_many relationships (as opposed to boring drop-down selections)

so I can drag and drop ‘User 1’ onto Host[“members”] to add or drag it
out to remove.

Is the droppable plugin of the jquery UI something you can use? It does
that, you can move boxes in and out of other boxes…

http://docs.jquery.com/UI/Droppable

On Nov 4, 2011, at 12:31 PM, comopasta Gr wrote:

that, you can move boxes in and out of other boxes…

Droppable Widget | jQuery UI API Documentation


yeah - that seems to be close enough to get me started. Out of curiosity
though - the page shows UI/API/1.8/Droppable and my rails 3.1.1 shows…

$ head -n 2 app/assets/javascripts/jquery-ui.js
/*

  • jQuery UI 1.6rc6

Does this matter? I note looking through this jquery-ui.js file that it
also includes some effects including droppable (in typical, vastly
unparseable javascript style)…

grep droppable app/assets/javascripts/jquery-ui.js
(function(a){a.widget(“ui.droppable”,{_init:function(){var
c=this.options,b=c.accept;this.isover=0;this.isout=1;this.options.accept=this.options.accept&&a.isFunction(this.options.accept)?this.options.accept:function(e){return
e.is(b)};this.proportions={width:this.element[0].offsetWidth,height:this.element[0].offsetHeight};a.ui.ddmanager.droppables[this.options.scope]=a.ui.ddmanager.droppables[this.options.scope]||[];a.ui.ddmanager.droppables[this.options.scope].push(this);(this.options.cssNamespace&&this.element.addClass(this.options.cssNamespace+“-droppable”))},destroy:function(){var
b=a.ui.ddmanager.droppables[this.options.scope];for(var
c=0;c<b.length;c++){if(b[c]==this){b.splice(c,1)}}this.element.removeClass(this.options.cssNamespace+“-droppable
“+this.options.cssNamespace+”-droppable-disabled”).removeData(“droppable”).unbind(“.droppable”)},_setData:function(b,c){if(b==“accept”){this.options.accept=c&&a.isFunction(c)?c:function(e){return
e.is(accept)}}else{a.widget.prototype._setData.apply(this,arguments)}},_activate:function(c){var
b=a.ui.ddmanager.current;if(this.options.activeClass){this.element.addClass(this.options.activeClass)}(b&&this._trigger(“activate”,c,this.ui(b)))},_deactivate:function(c){var
b=a.ui.ddmanager.current;if(this.options.activeClass){this.element.removeClass(this.options.activeClass)}(b&&this._trigger(“deactivate”,c,this.ui(b)))},_over:function(c){var
b=a.ui.ddmanager.current;if(!b||(b.currentItem||b.element)[0]==this.element[0]){return}if(this.options.accept.call(this.element[0],(b.currentItem||b.element))){if(this.options.hoverClass){this.element.addClass(this.options.hoverClass)}this._trigger(“over”,c,this.ui(b))}},_out:function(c){var
b=a.ui.ddmanager.current;if(!b||(b.currentItem||b.element)[0]==this.element[0]){return}if(this.options.accept.call(this.element[0],(b.currentItem||b.element))){if(this.options.hoverClass){this.element.removeClass(this.options.hoverClass)}this._trigger(“out”,c,this.ui(b))}},_drop:function(c,d){var
b=d||a.ui.ddmanager.current;if(!b||(b.currentItem||b.element)[0]==this.element[0]){return
false}var
e=false;this.element.find(“:data(droppable)”).not(“.”+b.options.cssNamespace+“-draggable-dragging”).each(function(){var
f=a.data(this,“droppable”);if(f.options.greedy&&a.ui.intersect(b,a.extend(f,{offset:f.element.offset()}),f.options.tolerance)){e=true;return
false}});if(e){return
false}if(this.options.accept.call(this.element[0],(b.currentItem||b.element))){if(this.options.activeClass){this.element.removeClass(this.options.activeClass)}if(this.options.hoverClass){this.element.removeClass(this.options.hoverClass)}this._trigger(“drop”,c,this.ui(b));return
this.element}return
false},ui:function(b){return{draggable:(b.currentItem||b.element),helper:b.helper,position:b.position,absolutePosition:b.positionAbs,offset:b.positionAbs}}});a.extend(a.ui.droppable,{version:“1.6rc6”,eventPrefix:“drop”,defaults:{accept:"“,activeClass:false,cssNamespace:“ui”,greedy:false,hoverClass:false,scope:“default”,tolerance:“intersect”}});a.ui.intersect=function(q,j,o){if(!j.offset){return
false}var
e=(q.positionAbs||q.position.absolute).left,d=e+q.helperProportions.width,n=(q.positionAbs||q.position.absolute).top,m=n+q.helperProportions.height;var
g=j.offset.left,c=g+j.proportions.width,p=j.offset.top,k=p+j.proportions.height;switch(o){case"fit”:return(g<e&&d<c&&p<n&&m<k);break;case"intersect":return(g<e+(q.helperProportions.width/2)&&d-(q.helperProportions.width/2)<c&&p<n+(q.helperProportions.height/2)&&m-(q.helperProportions.height/2)<k);break;case"pointer":var
h=((q.positionAbs||q.position.absolute).left+(q.clickOffset||q.offset.click).left),i=((q.positionAbs||q.position.absolute).top+(q.clickOffset||q.offset.click).top),f=a.ui.isOver(i,h,p,g,j.proportions.height,j.proportions.width);return
f;break;case"touch":return((n>=p&&n<=k)||(m>=p&&m<=k)||(n<p&&m>k))&&((e>=g&&e<=c)||(d>=g&&d<=c)||(e<g&&d>c));break;default:return
false;break}};a.ui.ddmanager={current:null,droppables:{“default”:[]},prepareOffsets:function(e,g){var
b=a.ui.ddmanager.droppables[e.options.scope];var f=g?g.type:null;var
h=(e.currentItem||e.element).find(“:data(droppable)”).andSelf();droppablesLoop:for(var
d=0;d<b.length;d++){if(b[d].options.disabled||(e&&!b[d].options.accept.call(b[d].element[0],(e.currentItem||e.element)))){continue}for(var
c=0;c<h.length;c++){if(h[c]==b[d].element[0]){b[d].proportions.height=0;continue
droppablesLoop}}b[d].visible=b[d].element.css(“display”)!=“none”;if(!b[d].visible){continue}b[d].offset=b[d].element.offset();b[d].proportions={width:b[d].element[0].offsetWidth,height:b[d].element[0].offsetHeight};if(f==“mousedown”){b[d]._activate.call(b[d],g)}}},drop:function(b,c){var
d=false;a.each(a.ui.ddmanager.droppables[b.options.scope],function(){if(!this.options){return}if(!this.options.disabled&&this.visible&&a.ui.intersect(b,this,this.options.tolerance)){d=this._drop.call(this,c)}if(!this.options.disabled&&this.visible&&this.options.accept.call(this.element[0],(b.currentItem||b.element))){this.isout=1;this.isover=0;this._deactivate.call(this,c)}});return
d},drag:function(b,c){if(b.options.refreshPositions){a.ui.ddmanager.prepareOffsets(b,c)}a.each(a.ui.ddmanager.droppables[b.options.scope],function(){if(this.options.disabled||this.greedyChild||!this.visible){return}var
e=a.ui.intersect(b,this,this.options.tolerance);var
g=!e&&this.isover==1?“isout”:(e&&this.isover==0?“isover”:null);if(!g){return}var
f;if(this.options.greedy){var
d=this.element.parents(“:data(droppable):eq(0)”);if(d.length){f=a.data(d[0],“droppable”);f.greedyChild=(g==“isover”?1:0)}}if(f&&g==“isover”){f.isover=0;f.isout=1;f._out.call(f,c)}this[g]=1;this[g==“isout”?“isover”:“isout”]=0;this[g==“isover”?“_over”:“_out”].call(this,c);if(f&&g==“isout”){f.isout=0;f.isover=1;f._over.call(f,c)}})}}})(jQuery);/

Craig