DragZone3.html 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  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-view-DragZone'>/**
  19. </span> * @private
  20. */
  21. Ext.define('Ext.view.DragZone', {
  22. extend: 'Ext.dd.DragZone',
  23. containerScroll: false,
  24. constructor: function(config) {
  25. var me = this,
  26. view,
  27. ownerCt,
  28. el;
  29. Ext.apply(me, config);
  30. // Create a ddGroup unless one has been configured.
  31. // User configuration of ddGroups allows users to specify which
  32. // DD instances can interact with each other. Using one
  33. // based on the id of the View would isolate it and mean it can only
  34. // interact with a DropZone on the same View also using a generated ID.
  35. if (!me.ddGroup) {
  36. me.ddGroup = 'view-dd-zone-' + me.view.id;
  37. }
  38. // Ext.dd.DragDrop instances are keyed by the ID of their encapsulating element.
  39. // So a View's DragZone cannot use the View's main element because the DropZone must use that
  40. // because the DropZone may need to scroll on hover at a scrolling boundary, and it is the View's
  41. // main element which handles scrolling.
  42. // We use the View's parent element to drag from. Ideally, we would use the internal structure, but that
  43. // is transient; DataView's recreate the internal structure dynamically as data changes.
  44. // TODO: Ext 5.0 DragDrop must allow multiple DD objects to share the same element.
  45. view = me.view;
  46. ownerCt = view.ownerCt;
  47. // We don't just grab the parent el, since the parent el may be
  48. // some el injected by the layout
  49. if (ownerCt) {
  50. el = ownerCt.getTargetEl().dom;
  51. } else {
  52. el = view.el.dom.parentNode;
  53. }
  54. me.callParent([el]);
  55. me.ddel = Ext.get(document.createElement('div'));
  56. me.ddel.addCls(Ext.baseCSSPrefix + 'grid-dd-wrap');
  57. },
  58. init: function(id, sGroup, config) {
  59. this.initTarget(id, sGroup, config);
  60. this.view.mon(this.view, {
  61. itemmousedown: this.onItemMouseDown,
  62. scope: this
  63. });
  64. },
  65. onValidDrop: function(target, e, id) {
  66. this.callParent();
  67. // focus the view that the node was dropped onto so that keynav will be enabled.
  68. target.el.focus();
  69. },
  70. onItemMouseDown: function(view, record, item, index, e) {
  71. if (!this.isPreventDrag(e, record, item, index)) {
  72. // Since handleMouseDown prevents the default behavior of the event, which
  73. // is to focus the view, we focus the view now. This ensures that the view
  74. // remains focused if the drag is cancelled, or if no drag occurs.
  75. this.view.focus();
  76. this.handleMouseDown(e);
  77. // If we want to allow dragging of multi-selections, then veto the following handlers (which, in the absence of ctrlKey, would deselect)
  78. // if the mousedowned record is selected
  79. if (view.getSelectionModel().selectionMode == 'MULTI' &amp;&amp; !e.ctrlKey &amp;&amp; view.getSelectionModel().isSelected(record)) {
  80. return false;
  81. }
  82. }
  83. },
  84. // private template method
  85. isPreventDrag: function(e) {
  86. return false;
  87. },
  88. getDragData: function(e) {
  89. var view = this.view,
  90. item = e.getTarget(view.getItemSelector());
  91. if (item) {
  92. return {
  93. copy: view.copy || (view.allowCopy &amp;&amp; e.ctrlKey),
  94. event: new Ext.EventObjectImpl(e),
  95. view: view,
  96. ddel: this.ddel,
  97. item: item,
  98. records: view.getSelectionModel().getSelection(),
  99. fromPosition: Ext.fly(item).getXY()
  100. };
  101. }
  102. },
  103. onInitDrag: function(x, y) {
  104. var me = this,
  105. data = me.dragData,
  106. view = data.view,
  107. selectionModel = view.getSelectionModel(),
  108. record = view.getRecord(data.item),
  109. e = data.event;
  110. // Update the selection to match what would have been selected if the user had
  111. // done a full click on the target node rather than starting a drag from it
  112. if (!selectionModel.isSelected(record)) {
  113. selectionModel.select(record, true);
  114. }
  115. data.records = selectionModel.getSelection();
  116. me.ddel.update(me.getDragText());
  117. me.proxy.update(me.ddel.dom);
  118. me.onStartDrag(x, y);
  119. return true;
  120. },
  121. getDragText: function() {
  122. var count = this.dragData.records.length;
  123. return Ext.String.format(this.dragText, count, count == 1 ? '' : 's');
  124. },
  125. getRepairXY : function(e, data){
  126. return data ? data.fromPosition : false;
  127. }
  128. });</pre>
  129. </body>
  130. </html>