Categories: Ext.js 教程

Ext.js 教程：拖放

拖放功能是为使开发人员轻松工作而添加的强大功能之一。拖动操作基本上是在某些UI元素上的点击手势，同时按住鼠标按钮并移动鼠标。 在拖动操作后释放鼠标按钮时，会发生放置操作。

语法

将类拖放到可拖动目标。

var dd = Ext.create(Ext.dd.DD, el, imagesDDGroup, {
        isTarget: false
});

添加拖放目标类到drappable目标

var mainTarget = Ext.create(Ext.dd.DDTarget, mainRoom, imagesDDGroup, {
       ignoreSelf: false
});

事件

方法 描述
startDrag(int x, int y)开始拖放事件，参数是x和y的坐标值。
onDrag(Event t)正在拖放事件，当拖放一个对象时触发，参数是mousemove鼠标移动事件。
onDragDrop(Event e, String|DragDrop[] id)正在放下事件，当一个对象放到另一个DragDrop对象上时触发，第一个参数是mouseup鼠标放开事件，第二个参数表示drop的目标位置。如果是在POINT模式下，就会传入目标元素的id；如果是在INTERSECT模式下，则会传入放下目标的拖放对象数组。
endDrag(Event e)拖放结束事件，在拖放操作结束之后触发，参数是mouseup鼠标放开事件。
onDragEnter(Event e, String|DragDrop[] id)进入drop区域事件，拖放过程中首次触碰到drop区域时触发。第一个参数是mousemove鼠标移动事件，第二个参数表示drop目标位置。如果是在POINT模式下，就会传入目标元素的id；如果是在INTERSECT模式下，则会传入放下目标的拖放对象数组。
onDragOut(Event e, String|DragDrop[] id)离开drop区域事件，拖放过程中从drop区域离开时触发。第一个参数是mousemove鼠标移动事件，第二个参数表示drop目标位置。如果是在POINT模式下，就会传入目标元素的id；如果是在INTERSECT模式下，则会传入放下目标的拖放对象数组。
onDragOver(Event e, String|DragDrop[] id)在drop区域中拖放移动事件，当在drop区域拖放移动时触发。第一个参数是mousemove鼠标移动事件，第二个参数表示drop目标位置。如果是在POINT模式下，就会传入目标元素的id；如果是在INTERSECT模式下，则会传入放下目标的拖放对象数组。
onInvalidDrop(Event e)不能drop事件，不在drop区域移动时触发，参数是mousemove鼠标移动事件。
onMouseDown(Event e)鼠标按下事件，参数是mousedown鼠标按下事件。
onMouseUp(Event e)鼠标放开事件，参数是mouseup鼠标放开事件。

例子

下面是一个简单的例子：

<!DOCTYPE html>
 <html>
 <head>
   <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" ></script>
    <script type="text/javascript">
       Ext.application({
           launch: function() {
               var images = Ext.get(images).select(img);
               Ext.each(images.elements, function(el) {
                   var dd = Ext.create(Ext.dd.DD, el, imagesDDGroup, {
                       isTarget: false
                   });
               });
           }
        });
       var mainTarget = Ext.create(Ext.dd.DDTarget, mainRoom, imagesDDGroup, {
          ignoreSelf: false
       });
    </script>
    <style>
       #content{
          width:600px;
          height:400px;
          padding:10px;
          border:1px solid #000;
       }
       #images{
          float:left;
          width:40%;
          height:100%;
          border:1px solid Black;
          background-color:rgba(222, 222, 222, 1.0);
       }
       #mainRoom{
          float:left;
          width:55%;
          height:100%;
          margin-left:15px;
          border:1px solid Black;
          background-color:rgba(222, 222, 222, 1.0);
       }
       .image{
          width:64px;
          height:64px;
          margin:10px;
          cursor:pointer;
          border:1px solid Black;
          display: inline-block;
       }
    </style>
 </head>
 <body>
    <div id="content">
       <div id="images">
          <img src = "/extjs/images/1.jpg" class = "image" />
          <img src = "/extjs/images/2.jpg" class = "image" />
          <img src = "/extjs/images/3.jpg" class = "image" />
          <img src = "/extjs/images/4.jpg" class = "image" />
          <img src = "/extjs/images/5.jpg" class = "image" />
          <img src = "/extjs/images/6.jpg" class = "image" />
          <img src = "/extjs/images/7.jpg" class = "image" />
          <img src = "/extjs/images/8.jpg" class = "image" />
       </div>
       <div id="mainRoom"></div>
    </div>
 </body>
 </html>

在Extjs的拖放的帮助下，我们可以将数据从网格移动到网格和网格到窗体。下面是在网格和窗体之间移动数据的例子。

Ext.js 网格到网格拖放

在拖放插件的帮助下，我们可以从一个网格拖动数据，并可以将其拖放到另一个网格，反之亦然。

下面提到的示例显示了如何从一个网格拖动数据到另一个网格，在这里我们有复位按钮来重置两个网格中的数据。

下面是一个简单的示例，显示了栅格之间的拖放。

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank"  rel="stylesheet" />
   <script type="text/javascript" src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" ></script>
   <script type="text/javascript">
      Ext.require([
         'Ext.grid.*',
         'Ext.data.*',
         'Ext.dd.*'
      ]);
      // Creation of data model
      Ext.define('StudentDataModel', {
         extend: 'Ext.data.Model',
         fields: [
         {name: 'name', mapping : 'name'},
         {name: 'age', mapping : 'age'},
         {name: 'marks', mapping : 'marks'}
         ]
      });

      Ext.onReady(function(){
         // Store data
         var myData = [
            { name : "Asha", age : "16", marks : "90" },
            { name : "Vinit", age : "18", marks : "95" },
            { name : "Anand", age : "20", marks : "68" },
            { name : "Niharika", age : "21", marks : "86" },
            { name : "Manali", age : "22", marks : "57" }
         ];
         // Creation of first grid store
         var firstGridStore = Ext.create('Ext.data.Store', {
         model: 'StudentDataModel',
         data: myData
         });
         // Creation of first grid
         var firstGrid = Ext.create('Ext.grid.Panel', {
            multiSelect: true,
            viewConfig: {
               plugins: {
                  ptype: 'gridviewdragdrop',
                  dragGroup: 'firstGridDDGroup',
                  dropGroup: 'secondGridDDGroup'
               },
               listeners: {
                  drop: function(node, data, dropRec, dropPosition) {
                     var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
                  }
               }
            },
            store            : firstGridStore,
            columns          :
               [{ 
                  header: "Student Name",
                  dataIndex: 'name', 
                  id : 'name',    
                  flex:  1,     
               sortable: true
               },{
                  header: "Age", 
                  dataIndex: 'age',
                  flex: .5, 
                  sortable: true
               },{
                  header: "Marks",
                  dataIndex: 'marks',
                  flex: .5, 
                  sortable: true
               }],
            stripeRows       : true,
            title            : 'First Grid',
            margins          : '0 2 0 0'
         });
         // Creation of second grid store
         var secondGridStore = Ext.create('Ext.data.Store', {
            model: 'StudentDataModel'
         });
         // Creation of second grid
         var secondGrid = Ext.create('Ext.grid.Panel', {
            viewConfig: {
               plugins: {
                  ptype: 'gridviewdragdrop',
                  dragGroup: 'secondGridDDGroup',
                  dropGroup: 'firstGridDDGroup'
               },
               listeners: {
                  drop: function(node, data, dropRec, dropPosition) {
                     var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
                  }
               }
            },
            store            : secondGridStore,
            columns          : 
            [{ 
               header: "Student Name",
               dataIndex: 'name', 
               id : 'name',    
               flex:  1,     
               sortable: true
            },{
               header: "Age", 
               dataIndex: 'age',
               flex: .5, 
               sortable: true
            },{
               header: "Marks",
               dataIndex: 'marks',
               flex: .5, 
               sortable: true
            }],
            stripeRows       : true,
            title            : 'Second Grid',
            margins          : '0 0 0 3'
         });
         // Creation of a panel to show both the grids.
         var displayPanel = Ext.create('Ext.Panel', {
            width        : 600,
            height       : 200,
            layout       : {
               type: 'hbox',
               align: 'stretch',
               padding: 5
            },
            renderTo     : 'panel',
            defaults     : { flex : 1 }, 
            items        : [
               firstGrid,
               secondGrid
            ],
            dockedItems: {
               xtype: 'toolbar',
               dock: 'bottom',
               items: ['->', 
               {
                  text: 'Reset both grids',
                  handler: function(){
                     firstGridStore.loadData(myData);
                     secondGridStore.removeAll();
                  }
               }]
            }
         });
      });
   </script>
</head>
<body>
<div id = "panel" > </div>
</body>
</html>

结果：


Ext.js 网格到表单拖放

在拖放插件的帮助下，我们可以从一个网格拖动数据，并可以将其拖放到表单字段。

下面提到的示例显示，我们可以从网格中拖动数据，并将其拖放到这里，我们有复位按钮在窗体和网格中重置数据。

下面是一个简单的例子，显示拖放网格到窗体。

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank"  rel="stylesheet" />
   <script type="text/javascript" src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" ></script>
   <script type="text/javascript">  
      Ext.require(['*']);
      Ext.onReady(function(){
         // 存储数据
         var myData = [
            { name : "Asha", age : "16", marks : "90" },
            { name : "Vinit", age : "18", marks : "95" },
            { name : "Anand", age : "20", marks : "68" },
            { name : "Niharika", age : "21", marks : "86" },
            { name : "Manali", age : "22", marks : "57" }
         ];
         // 创建数据模型
         Ext.define('StudentDataModel', {
            extend: 'Ext.data.Model',
            fields: [
               {name: 'name', mapping : 'name'},
               {name: 'age', mapping : 'age'},
               {name: 'marks', mapping : 'marks'}
            ]
         });
          // 创建网格存储
         var gridStore = Ext.create('Ext.data.Store', {
            model  : 'StudentDataModel',
            data   : myData
         });
         // 创建第一个网格
         var grid = Ext.create('Ext.grid.Panel', {
            viewConfig: {
               plugins: {
                  ddGroup: 'GridExample',
                  ptype: 'gridviewdragdrop',
                  enableDrop: false
               }
            },
            enableDragDrop   : true,
            stripeRows       : true,
            width            : 300,
            margins          : '0 2 0 0',
            region           : 'west',
            title            : 'Student Data Grid',
            selModel         : Ext.create('Ext.selection.RowModel',{
               singleSelect : true
            }),
            store            : gridStore,
            columns          : 
               [{ 
                  header: "Student Name",
                  dataIndex: 'name', 
                  id : 'name',    
                  flex:  1,     
                  sortable: true
               },{
                  header: "Age", 
                  dataIndex: 'age',
                  flex: .5, 
                  sortable: true
               },{
                  header: "Marks",
                  dataIndex: 'marks',
                  flex: .5, 
                  sortable: true
               }]
         });
         // 创建窗体面板
         var formPanel = Ext.create('Ext.form.Panel', {
            region     : 'center',
            title      : 'Generic Form Panel',
            bodyStyle  : 'padding: 10px; background-color: #DFE8F6',
            labelWidth : 100,
            width      : 300,
            margins    : '0 0 0 3',
            items      : [{
               xtype : 'textfield',
               fieldLabel : 'Student Name',
               name       : 'name'
            },{
               xtype : 'textfield',
               fieldLabel : 'Age',
               name       : 'age'
            },{
               xtype : 'textfield',
               fieldLabel : 'Marks',
               name       : 'marks'
            }]
         });
         // 创建同时显示网格和窗体的显示面板
         var displayPanel = Ext.create('Ext.Panel', {
            width    : 600,
            height   : 200,
            layout   : 'border',
            renderTo : 'panel',
            bodyPadding: '5',
            items    : [grid, formPanel],
            bbar    : [
               '->',
               {
               text    : 'Reset',
               handler : function() {
                  gridStore.loadData(myData);
                  formPanel.getForm().reset();
               }
            }]
         });

         var formPanelDropTargetEl =  formPanel.body.dom;
        //为drop创建tager变量
         var formPanelDropTarget = Ext.create('Ext.dd.DropTarget', formPanelDropTargetEl, {
            ddGroup: 'GridExample',
            notifyEnter: function(ddSource, e, data) {
               formPanel.body.stopAnimation();
               formPanel.body.highlight();
            },
            notifyDrop  : function(ddSource, e, data){
               var selectedRecord = ddSource.dragData.records[0];
               formPanel.getForm().loadRecord(selectedRecord);
               ddSource.view.store.remove(selectedRecord);
               return true;
            }
         });
      });
   </script>
</head>
<body>
   <div id = "panel" > </div>
</body>
</html>

结果：

大家试试吧。

terry

这个人很懒，什么都没有留下～

Leave a Comment
Share
Published by
terry
1 年 ago

Recent Posts

聊聊vue3中的defineProps

在Vue 3中，defineP…

5 天 ago

在 Chrome 中删除、允许和管理 Cookie

您可以选择删除现有 Cooki…

1 周 ago

自定义指令：聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

2 周 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

3 周 ago

Nginx 基本操作：启动、停止、重启命令。

我们来学习Nginx基础操作：…

4 周 ago

Vue3：手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

4 周 ago