DropTarget.html 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-dd-DropTarget'>/**
  19. </span> * A simple class that provides the basic implementation needed to make any element a drop target that can have
  20. * draggable items dropped onto it. The drop has no effect until an implementation of notifyDrop is provided.
  21. */
  22. Ext.define('Ext.dd.DropTarget', {
  23. extend: 'Ext.dd.DDTarget',
  24. requires: ['Ext.dd.ScrollManager'],
  25. <span id='Ext-dd-DropTarget-method-constructor'> /**
  26. </span> * Creates new DropTarget.
  27. * @param {String/HTMLElement/Ext.Element} el The container element or ID of it.
  28. * @param {Object} config
  29. */
  30. constructor : function(el, config){
  31. this.el = Ext.get(el);
  32. Ext.apply(this, config);
  33. if(this.containerScroll){
  34. Ext.dd.ScrollManager.register(this.el);
  35. }
  36. this.callParent([this.el.dom, this.ddGroup || this.group,
  37. {isTarget: true}]);
  38. },
  39. <span id='Ext-dd-DropTarget-cfg-ddGroup'> /**
  40. </span> * @cfg {String} ddGroup
  41. * A named drag drop group to which this object belongs. If a group is specified, then this object will only
  42. * interact with other drag drop objects in the same group.
  43. */
  44. <span id='Ext-dd-DropTarget-cfg-overClass'> /**
  45. </span> * @cfg {String} [overClass=&quot;&quot;]
  46. * The CSS class applied to the drop target element while the drag source is over it.
  47. */
  48. <span id='Ext-dd-DropTarget-cfg-dropAllowed'> /**
  49. </span> * @cfg {String} dropAllowed
  50. * The CSS class returned to the drag source when drop is allowed.
  51. */
  52. dropAllowed : Ext.baseCSSPrefix + 'dd-drop-ok',
  53. <span id='Ext-dd-DropTarget-cfg-dropNotAllowed'> /**
  54. </span> * @cfg {String} dropNotAllowed
  55. * The CSS class returned to the drag source when drop is not allowed.
  56. */
  57. dropNotAllowed : Ext.baseCSSPrefix + 'dd-drop-nodrop',
  58. // private
  59. isTarget : true,
  60. // private
  61. isNotifyTarget : true,
  62. <span id='Ext-dd-DropTarget-method-notifyEnter'> /**
  63. </span> * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the source is now over the
  64. * target. This default implementation adds the CSS class specified by overClass (if any) to the drop element
  65. * and returns the dropAllowed config value. This method should be overridden if drop validation is required.
  66. * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
  67. * @param {Event} e The event
  68. * @param {Object} data An object containing arbitrary data supplied by the drag source
  69. * @return {String} status The CSS class that communicates the drop status back to the source so that the
  70. * underlying {@link Ext.dd.StatusProxy} can be updated
  71. * @template
  72. */
  73. notifyEnter : function(dd, e, data){
  74. if(this.overClass){
  75. this.el.addCls(this.overClass);
  76. }
  77. return this.dropAllowed;
  78. },
  79. <span id='Ext-dd-DropTarget-method-notifyOver'> /**
  80. </span> * The function a {@link Ext.dd.DragSource} calls continuously while it is being dragged over the target.
  81. * This method will be called on every mouse movement while the drag source is over the drop target.
  82. * This default implementation simply returns the dropAllowed config value.
  83. * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
  84. * @param {Event} e The event
  85. * @param {Object} data An object containing arbitrary data supplied by the drag source
  86. * @return {String} status The CSS class that communicates the drop status back to the source so that the
  87. * underlying {@link Ext.dd.StatusProxy} can be updated
  88. * @template
  89. */
  90. notifyOver : function(dd, e, data){
  91. return this.dropAllowed;
  92. },
  93. <span id='Ext-dd-DropTarget-method-notifyOut'> /**
  94. </span> * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the source has been dragged
  95. * out of the target without dropping. This default implementation simply removes the CSS class specified by
  96. * overClass (if any) from the drop element.
  97. * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
  98. * @param {Event} e The event
  99. * @param {Object} data An object containing arbitrary data supplied by the drag source
  100. * @template
  101. */
  102. notifyOut : function(dd, e, data){
  103. if(this.overClass){
  104. this.el.removeCls(this.overClass);
  105. }
  106. },
  107. <span id='Ext-dd-DropTarget-method-notifyDrop'> /**
  108. </span> * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the dragged item has
  109. * been dropped on it. This method has no default implementation and returns false, so you must provide an
  110. * implementation that does something to process the drop event and returns true so that the drag source's
  111. * repair action does not run.
  112. * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
  113. * @param {Event} e The event
  114. * @param {Object} data An object containing arbitrary data supplied by the drag source
  115. * @return {Boolean} False if the drop was invalid.
  116. * @template
  117. */
  118. notifyDrop : function(dd, e, data){
  119. return false;
  120. },
  121. destroy : function(){
  122. this.callParent();
  123. if(this.containerScroll){
  124. Ext.dd.ScrollManager.unregister(this.el);
  125. }
  126. }
  127. });
  128. </pre>
  129. </body>
  130. </html>