2 * Interface Elements for jQuery
\r
5 * http://interface.eyecon.ro
\r
7 * Copyright (c) 2006 Stefan Petre
\r
8 * Dual licensed under the MIT (MIT-LICENSE.txt)
\r
9 * and GPL (GPL-LICENSE.txt) licenses.
\r
15 * With the Draggables plugin, Droppable allows you to create drop zones for draggable elements.
\r
18 * @cat Plugins/Interface
\r
19 * @param Hash options A hash of options
\r
20 * @option String accept The class name for draggables to get accepted by the droppable (mandatory)
\r
21 * @option String activeclass When an acceptable draggable is moved, the droppable gets this class
\r
22 * @option String hoverclass When an acceptable draggable is inside the droppable, the droppable gets
\r
24 * @option String tolerance Choose from 'pointer', 'intersect', or 'fit'. The pointer options means
\r
25 * that the pointer must be inside the droppable in order for the draggable
\r
26 * to be dropped. The intersect option means that the draggable must intersect
\r
27 * the droppable. The fit option means that the entire draggable must be
\r
28 * inside the droppable.
\r
29 * @option Function onDrop When an acceptable draggable is dropped on a droppable, this callback is
\r
30 * called. It passes the draggable DOMElement as a parameter.
\r
31 * @option Function onHover When an acceptable draggable is hovered over a droppable, this callback
\r
32 * is called. It passes the draggable DOMElement as a parameter.
\r
33 * @option Function onOut When an acceptable draggable leaves a droppable, this callback is called.
\r
34 * It passes the draggable DOMElement as a parameter.
\r
35 * @example $('#dropzone1').Droppable(
\r
37 * accept : 'dropaccept',
\r
38 * activeclass: 'dropzoneactive',
\r
39 * hoverclass: 'dropzonehover',
\r
40 * ondrop: function (drag) {
\r
41 * alert(this); //the droppable
\r
42 * alert(drag); //the draggable
\r
50 fit : function (zonex, zoney, zonew, zoneh)
\r
52 return zonex <= jQuery.iDrag.dragged.dragCfg.nx &&
\r
53 (zonex + zonew) >= (jQuery.iDrag.dragged.dragCfg.nx + jQuery.iDrag.dragged.dragCfg.oC.w) &&
\r
54 zoney <= jQuery.iDrag.dragged.dragCfg.ny &&
\r
55 (zoney + zoneh) >= (jQuery.iDrag.dragged.dragCfg.ny + jQuery.iDrag.dragged.dragCfg.oC.h) ? true :false;
\r
57 intersect : function (zonex, zoney, zonew, zoneh)
\r
59 return ! ( zonex > (jQuery.iDrag.dragged.dragCfg.nx + jQuery.iDrag.dragged.dragCfg.oC.w)
\r
60 || (zonex + zonew) < jQuery.iDrag.dragged.dragCfg.nx
\r
61 || zoney > (jQuery.iDrag.dragged.dragCfg.ny + jQuery.iDrag.dragged.dragCfg.oC.h)
\r
62 || (zoney + zoneh) < jQuery.iDrag.dragged.dragCfg.ny
\r
65 pointer : function (zonex, zoney, zonew, zoneh)
\r
67 return zonex < jQuery.iDrag.dragged.dragCfg.currentPointer.x
\r
68 && (zonex + zonew) > jQuery.iDrag.dragged.dragCfg.currentPointer.x
\r
69 && zoney < jQuery.iDrag.dragged.dragCfg.currentPointer.y
\r
70 && (zoney + zoneh) > jQuery.iDrag.dragged.dragCfg.currentPointer.y
\r
78 highlight : function (elm)
\r
80 if (jQuery.iDrag.dragged == null) {
\r
84 jQuery.iDrop.highlighted = {};
\r
85 var oneIsSortable = false;
\r
86 for (i in jQuery.iDrop.zones) {
\r
87 if (jQuery.iDrop.zones[i] != null) {
\r
88 var iEL = jQuery.iDrop.zones[i].get(0);
\r
89 if (jQuery(jQuery.iDrag.dragged).is('.' + iEL.dropCfg.a)) {
\r
90 if (iEL.dropCfg.m == false) {
\r
91 iEL.dropCfg.p = jQuery.extend(
\r
92 jQuery.iUtil.getPositionLite(iEL),
\r
93 jQuery.iUtil.getSizeLite(iEL)
\r
94 );//jQuery.iUtil.getPos(iEL);
\r
95 iEL.dropCfg.m = true;
\r
97 if (iEL.dropCfg.ac) {
\r
98 jQuery.iDrop.zones[i].addClass(iEL.dropCfg.ac);
\r
100 jQuery.iDrop.highlighted[i] = jQuery.iDrop.zones[i];
\r
101 //if (jQuery.iSort && jQuery.iDrag.dragged.dragCfg.so) {
\r
102 if (jQuery.iSort && iEL.dropCfg.s && jQuery.iDrag.dragged.dragCfg.so) {
\r
103 iEL.dropCfg.el = jQuery('.' + iEL.dropCfg.a, iEL);
\r
104 elm.style.display = 'none';
\r
105 jQuery.iSort.measure(iEL);
\r
106 iEL.dropCfg.os = jQuery.iSort.serialize(jQuery.attr(iEL, 'id')).hash;
\r
107 elm.style.display = elm.dragCfg.oD;
\r
108 oneIsSortable = true;
\r
110 if (iEL.dropCfg.onActivate) {
\r
111 iEL.dropCfg.onActivate.apply(jQuery.iDrop.zones[i].get(0), [jQuery.iDrag.dragged]);
\r
116 //if (jQuery.iSort && jQuery.iDrag.dragged.dragCfg.so) {
\r
117 if (oneIsSortable) {
\r
118 jQuery.iSort.start();
\r
122 * remeasure the droppable
\r
124 * useful when the positions/dimensions for droppables
\r
125 * are changed while dragging a element
\r
127 * this works for sortables too but with a greate processor
\r
128 * penality because remeasures each sort items too
\r
130 remeasure : function()
\r
132 jQuery.iDrop.highlighted = {};
\r
133 for (i in jQuery.iDrop.zones) {
\r
134 if (jQuery.iDrop.zones[i] != null) {
\r
135 var iEL = jQuery.iDrop.zones[i].get(0);
\r
136 if (jQuery(jQuery.iDrag.dragged).is('.' + iEL.dropCfg.a)) {
\r
137 iEL.dropCfg.p = jQuery.extend(
\r
138 jQuery.iUtil.getPositionLite(iEL),
\r
139 jQuery.iUtil.getSizeLite(iEL)
\r
141 if (iEL.dropCfg.ac) {
\r
142 jQuery.iDrop.zones[i].addClass(iEL.dropCfg.ac);
\r
144 jQuery.iDrop.highlighted[i] = jQuery.iDrop.zones[i];
\r
146 if (jQuery.iSort && iEL.dropCfg.s && jQuery.iDrag.dragged.dragCfg.so) {
\r
147 iEL.dropCfg.el = jQuery('.' + iEL.dropCfg.a, iEL);
\r
148 elm.style.display = 'none';
\r
149 jQuery.iSort.measure(iEL);
\r
150 elm.style.display = elm.dragCfg.oD;
\r
157 checkhover : function (e)
\r
159 if (jQuery.iDrag.dragged == null) {
\r
162 jQuery.iDrop.overzone = false;
\r
164 var applyOnHover = false;
\r
166 for (i in jQuery.iDrop.highlighted)
\r
168 var iEL = jQuery.iDrop.highlighted[i].get(0);
\r
170 jQuery.iDrop.overzone == false
\r
172 jQuery.iDrop[iEL.dropCfg.t](
\r
180 if (iEL.dropCfg.hc && iEL.dropCfg.h == false) {
\r
181 jQuery.iDrop.highlighted[i].addClass(iEL.dropCfg.hc);
\r
183 //chec if onHover function has to be called
\r
184 if (iEL.dropCfg.h == false &&iEL.dropCfg.onHover) {
\r
185 applyOnHover = true;
\r
187 iEL.dropCfg.h = true;
\r
188 jQuery.iDrop.overzone = iEL;
\r
189 //if(jQuery.iSort && jQuery.iDrag.dragged.dragCfg.so) {
\r
190 if(jQuery.iSort && iEL.dropCfg.s && jQuery.iDrag.dragged.dragCfg.so) {
\r
191 jQuery.iSort.helper.get(0).className = iEL.dropCfg.shc;
\r
192 jQuery.iSort.checkhover(iEL);
\r
195 } else if(iEL.dropCfg.h == true) {
\r
197 if (iEL.dropCfg.onOut) {
\r
198 iEL.dropCfg.onOut.apply(iEL, [e, jQuery.iDrag.helper.get(0).firstChild, iEL.dropCfg.fx]);
\r
200 if (iEL.dropCfg.hc) {
\r
201 jQuery.iDrop.highlighted[i].removeClass(iEL.dropCfg.hc);
\r
203 iEL.dropCfg.h = false;
\r
206 if (jQuery.iSort && !jQuery.iDrop.overzone && jQuery.iDrag.dragged.so) {
\r
207 jQuery.iSort.helper.get(0).style.display = 'none';
\r
208 //jQuery('body').append(jQuery.iSort.helper.get(0));
\r
212 jQuery.iDrop.overzone.dropCfg.onHover.apply(jQuery.iDrop.overzone, [e, jQuery.iDrag.helper.get(0).firstChild]);
\r
215 checkdrop : function (e)
\r
218 for (i in jQuery.iDrop.highlighted) {
\r
219 var iEL = jQuery.iDrop.highlighted[i].get(0);
\r
220 if (iEL.dropCfg.ac) {
\r
221 jQuery.iDrop.highlighted[i].removeClass(iEL.dropCfg.ac);
\r
223 if (iEL.dropCfg.hc) {
\r
224 jQuery.iDrop.highlighted[i].removeClass(iEL.dropCfg.hc);
\r
226 if(iEL.dropCfg.s) {
\r
227 jQuery.iSort.changed[jQuery.iSort.changed.length] = i;
\r
229 if (iEL.dropCfg.onDrop && iEL.dropCfg.h == true) {
\r
230 iEL.dropCfg.h = false;
\r
231 iEL.dropCfg.onDrop.apply(iEL, [e, iEL.dropCfg.fx]);
\r
233 iEL.dropCfg.m = false;
\r
234 iEL.dropCfg.h = false;
\r
236 jQuery.iDrop.highlighted = {};
\r
238 destroy : function()
\r
243 if (this.isDroppable) {
\r
244 if (this.dropCfg.s) {
\r
245 id = jQuery.attr(this,'id');
\r
246 jQuery.iSort.collected[id] = null;
\r
247 jQuery('.' + this.dropCfg.a, this).DraggableDestroy();
\r
249 jQuery.iDrop.zones['d' + this.idsa] = null;
\r
250 this.isDroppable = false;
\r
256 build : function (o)
\r
261 if (this.isDroppable == true || !o.accept || !jQuery.iUtil || !jQuery.iDrag){
\r
266 ac: o.activeclass||false,
\r
267 hc: o.hoverclass||false,
\r
268 shc: o.helperclass||false,
\r
269 onDrop: o.ondrop||o.onDrop||false,
\r
270 onHover: o.onHover||o.onhover||false,
\r
271 onOut: o.onOut||o.onout||false,
\r
272 onActivate: o.onActivate||false,
\r
273 t: o.tolerance && ( o.tolerance == 'fit' || o.tolerance == 'intersect') ? o.tolerance : 'pointer',
\r
274 fx: o.fx ? o.fx : false,
\r
278 if (o.sortable == true && jQuery.iSort) {
\r
279 id = jQuery.attr(this,'id');
\r
280 jQuery.iSort.collected[id] = this.dropCfg.a;
\r
281 this.dropCfg.s = true;
\r
283 this.dropCfg.onChange = o.onChange;
\r
284 this.dropCfg.os = jQuery.iSort.serialize(id).hash;
\r
287 this.isDroppable = true;
\r
288 this.idsa = parseInt(Math.random() * 10000);
\r
289 jQuery.iDrop.zones['d' + this.idsa] = jQuery(this);
\r
290 jQuery.iDrop.count ++;
\r
297 * Destroy an existing droppable on a collection of elements
\r
299 * @name DroppableDestroy
\r
300 * @descr Destroy a droppable
\r
302 * @cat Plugins/Interface
\r
303 * @example $('#drag2').DroppableDestroy();
\r
308 DroppableDestroy : jQuery.iDrop.destroy,
\r
309 Droppable : jQuery.iDrop.build
\r
315 * Recalculate all Droppables
\r
317 * @name $.recallDroppables
\r
319 * @cat Plugins/Interface
\r
320 * @example $.recallDroppable();
\r
323 jQuery.recallDroppables = jQuery.iDrop.remeasure;