]>
git.proxmox.com Git - sencha-touch.git/blob - src/src/util/Droppable.js
4 Ext
.define('Ext.util.Droppable', {
6 observable
: 'Ext.mixin.Observable'
11 * The base CSS class to apply to this component's element.
12 * This will also be prepended to other elements within this component.
14 baseCls
: Ext
.baseCSSPrefix
+ 'droppable'
18 * @cfg {String} activeCls
19 * The CSS added to a Droppable when a Draggable in the same group is being
22 activeCls
: Ext
.baseCSSPrefix
+ 'drop-active',
25 * @cfg {String} invalidCls
26 * The CSS class to add to the droppable when dragging a draggable that is
27 * not in the same group.
29 invalidCls
: Ext
.baseCSSPrefix
+ 'drop-invalid',
32 * @cfg {String} hoverCls
33 * The CSS class to add to the droppable when hovering over a valid drop.
35 hoverCls
: Ext
.baseCSSPrefix
+ 'drop-hover',
38 * @cfg {String} validDropMode
39 * Determines when a drop is considered 'valid' whether it simply need to
40 * intersect the region or if it needs to be contained within the region.
41 * Valid values are: 'intersects' or 'contains'
43 validDropMode
: 'intersect',
46 * @cfg {Boolean} disabled
52 * Draggable and Droppable objects can participate in a group which are
53 * capable of interacting.
57 // not yet implemented
64 * Creates new Droppable.
65 * @param {Mixed} el String, HtmlElement or Ext.Element representing an
66 * element on the page.
67 * @param {Object} config Configuration options for this class.
69 constructor: function(el
, config
) {
72 config
= config
|| {};
73 Ext
.apply(me
, config
);
77 * @param {Ext.util.Droppable} this
78 * @param {Ext.util.Draggable} draggable
79 * @param {Ext.event.Event} e
83 * @event dropdeactivate
84 * @param {Ext.util.Droppable} this
85 * @param {Ext.util.Draggable} draggable
86 * @param {Ext.event.Event} e
91 * @param {Ext.util.Droppable} this
92 * @param {Ext.util.Draggable} draggable
93 * @param {Ext.event.Event} e
98 * @param {Ext.util.Droppable} this
99 * @param {Ext.util.Draggable} draggable
100 * @param {Ext.event.Event} e
105 * @param {Ext.util.Droppable} this
106 * @param {Ext.util.Draggable} draggable
107 * @param {Ext.event.Event} e
113 me
.mixins
.observable
.constructor.call(me
);
119 me
.el
.addCls(me
.baseCls
);
123 onDragStart: function(draggable
, e
) {
124 if (draggable
.group
=== this.group
) {
125 this.monitoring
= true;
126 this.el
.addCls(this.activeCls
);
127 this.region
= this.el
.getPageBox(true);
131 beforedragend
: this.onBeforeDragEnd
,
132 dragend
: this.onDragEnd
,
136 if (this.isDragOver(draggable
)) {
137 this.setCanDrop(true, draggable
, e
);
140 this.fireEvent('dropactivate', this, draggable
, e
);
144 dragend: function() {
145 this.el
.removeCls(this.invalidCls
);
150 this.el
.addCls(this.invalidCls
);
155 isDragOver: function(draggable
, region
) {
156 return this.region
[this.validDropMode
](draggable
.region
);
160 onDrag: function(draggable
, e
) {
161 this.setCanDrop(this.isDragOver(draggable
), draggable
, e
);
165 setCanDrop: function(canDrop
, draggable
, e
) {
166 if (canDrop
&& !this.canDrop
) {
168 this.el
.addCls(this.hoverCls
);
169 this.fireEvent('dropenter', this, draggable
, e
);
171 else if (!canDrop
&& this.canDrop
) {
172 this.canDrop
= false;
173 this.el
.removeCls(this.hoverCls
);
174 this.fireEvent('dropleave', this, draggable
, e
);
179 onBeforeDragEnd: function(draggable
, e
) {
180 draggable
.cancelRevert
= this.canDrop
;
184 onDragEnd: function(draggable
, e
) {
185 this.monitoring
= false;
186 this.el
.removeCls(this.activeCls
);
190 beforedragend
: this.onBeforeDragEnd
,
191 dragend
: this.onDragEnd
,
197 this.canDrop
= false;
198 this.el
.removeCls(this.hoverCls
);
199 this.fireEvent('drop', this, draggable
, e
);
202 this.fireEvent('dropdeactivate', this, draggable
, e
);
206 * Enable the Droppable target.
207 * This is invoked immediately after constructing a Droppable if the
208 * disabled parameter is NOT set to true.
212 this.mgr
= Ext
.util
.Observable
.observe(Ext
.util
.Draggable
);
215 dragstart
: this.onDragStart
,
218 this.disabled
= false;
222 * Disable the Droppable target.
224 disable: function() {
226 dragstart
: this.onDragStart
,
229 this.disabled
= true;
233 * Method to determine whether this Component is currently disabled.
234 * @return {Boolean} the disabled state of this Component.
236 isDisabled: function() {
237 return this.disabled
;
241 * Method to determine whether this Droppable is currently monitoring drag operations of Draggables.
242 * @return {Boolean} the monitoring state of this Droppable
244 isMonitoring: function() {
245 return this.monitoring
;