DropTarget.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. /*
  2. * Ext JS Library 2.0 Copyright(c) 2006-2007, Ext JS, LLC. licensing@extjs.com
  3. *
  4. * http://extjs.com/license
  5. */
  6. /**
  7. * @class Ext.dd.DropTarget
  8. * @extends Ext.dd.DDTarget A simple class that provides the basic
  9. * implementation needed to make any element a drop target that can
  10. * have draggable items dropped onto it. The drop has no effect until
  11. * an implementation of notifyDrop is provided.
  12. * @constructor
  13. * @param {Mixed}
  14. * el The container element
  15. * @param {Object}
  16. * config
  17. */
  18. Ext.dd.DropTarget = function(el, config) {
  19. this.el = Ext.get(el);
  20. Ext.apply(this, config);
  21. if (this.containerScroll) {
  22. Ext.dd.ScrollManager.register(this.el);
  23. }
  24. Ext.dd.DropTarget.superclass.constructor.call(this, this.el.dom,
  25. this.ddGroup || this.group, {
  26. isTarget : true
  27. });
  28. };
  29. Ext.extend(Ext.dd.DropTarget, Ext.dd.DDTarget, {
  30. /**
  31. * @cfg {String} ddGroup A named drag drop group to which this
  32. * object belongs. If a group is specified, then this object
  33. * will only interact with other drag drop objects in the same
  34. * group (defaults to undefined).
  35. */
  36. /**
  37. * @cfg {String} overClass The CSS class applied to the drop target
  38. * element while the drag source is over it (defaults to "").
  39. */
  40. /**
  41. * @cfg {String} dropAllowed The CSS class returned to the drag
  42. * source when drop is allowed (defaults to "x-dd-drop-ok").
  43. */
  44. dropAllowed : "x-dd-drop-ok",
  45. /**
  46. * @cfg {String} dropNotAllowed The CSS class returned to the drag
  47. * source when drop is not allowed (defaults to
  48. * "x-dd-drop-nodrop").
  49. */
  50. dropNotAllowed : "x-dd-drop-nodrop",
  51. // private
  52. isTarget : true,
  53. // private
  54. isNotifyTarget : true,
  55. /**
  56. * The function a {@link Ext.dd.DragSource} calls once to notify
  57. * this drop target that the source is now over the target. This
  58. * default implementation adds the CSS class specified by overClass
  59. * (if any) to the drop element and returns the dropAllowed config
  60. * value. This method should be overridden if drop validation is
  61. * required.
  62. *
  63. * @param {Ext.dd.DragSource}
  64. * source The drag source that was dragged over this drop
  65. * target
  66. * @param {Event}
  67. * e The event
  68. * @param {Object}
  69. * data An object containing arbitrary data supplied by
  70. * the drag source
  71. * @return {String} status The CSS class that communicates the drop
  72. * status back to the source so that the underlying
  73. * {@link Ext.dd.StatusProxy} can be updated
  74. */
  75. notifyEnter : function(dd, e, data) {
  76. if (this.overClass) {
  77. this.el.addClass(this.overClass);
  78. }
  79. return this.dropAllowed;
  80. },
  81. /**
  82. * The function a {@link Ext.dd.DragSource} calls continuously while
  83. * it is being dragged over the target. This method will be called
  84. * on every mouse movement while the drag source is over the drop
  85. * target. This default implementation simply returns the
  86. * dropAllowed config value.
  87. *
  88. * @param {Ext.dd.DragSource}
  89. * source The drag source that was dragged over this drop
  90. * target
  91. * @param {Event}
  92. * e The event
  93. * @param {Object}
  94. * data An object containing arbitrary data supplied by
  95. * the drag source
  96. * @return {String} status The CSS class that communicates the drop
  97. * status back to the source so that the underlying
  98. * {@link Ext.dd.StatusProxy} can be updated
  99. */
  100. notifyOver : function(dd, e, data) {
  101. return this.dropAllowed;
  102. },
  103. /**
  104. * The function a {@link Ext.dd.DragSource} calls once to notify
  105. * this drop target that the source has been dragged out of the
  106. * target without dropping. This default implementation simply
  107. * removes the CSS class specified by overClass (if any) from the
  108. * drop element.
  109. *
  110. * @param {Ext.dd.DragSource}
  111. * source The drag source that was dragged over this drop
  112. * target
  113. * @param {Event}
  114. * e The event
  115. * @param {Object}
  116. * data An object containing arbitrary data supplied by
  117. * the drag source
  118. */
  119. notifyOut : function(dd, e, data) {
  120. if (this.overClass) {
  121. this.el.removeClass(this.overClass);
  122. }
  123. },
  124. /**
  125. * The function a {@link Ext.dd.DragSource} calls once to notify
  126. * this drop target that the dragged item has been dropped on it.
  127. * This method has no default implementation and returns false, so
  128. * you must provide an implementation that does something to process
  129. * the drop event and returns true so that the drag source's repair
  130. * action does not run.
  131. *
  132. * @param {Ext.dd.DragSource}
  133. * source The drag source that was dragged over this drop
  134. * target
  135. * @param {Event}
  136. * e The event
  137. * @param {Object}
  138. * data An object containing arbitrary data supplied by
  139. * the drag source
  140. * @return {Boolean} True if the drop was valid, else false
  141. */
  142. notifyDrop : function(dd, e, data) {
  143. return false;
  144. }
  145. });