Friday, February 17, 2017

Ext.js - Drag and Drop

Description

Drag and drop feature is one of the powerful feature added for making developers task easy.A drag operation, essentially, is a click gesture on some UI element while the mouse button is held down and the mouse is moved. A drop operation occurs when the mouse button is released after a drag operation.

Syntax

Adding drag and drop class to the draggable targets.
   var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', {
       isTarget: false
   });
Adding drag and drop target class to drappable target
   var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', {
      ignoreSelf: false
   });

Example

Following is a simple example
<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></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>
This will produce following result −
With the help of drag and drop in Extjs we can move data from grid to grid and grid to form.Below are the example of moving data between grids and forms.
Drag and drop - Grid to Grid.
drag and drop - Grid to Form
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)