Ext.js drag-and-drop

May 09, 2021 Extjs

Describe

Drag-and-drop is one of the most powerful features added to make it easy for developers to work. D rag is basically a click gesture on some UI elements while holding down the mouse button and moving the mouse. /b10> A placement occurs when the mouse button is released after the drag operation.

Grammar

Drag and drop the class to a draggable target.

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

Add drag-and-drop target classes to the drappable target

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

Event

Method	Describe
startDrag(int x, int y)	Start drag-and-drop events, and the parameters are the coordinate values of x and y.
onDrag(Event t)	Dragging and droping event, triggered when dragging and droping an object, the parameter is the mousemove mouse movement event.
onDragDrop(Event e, String\| DragDrop[] id)	Dropping the event, triggered when one object is placed on another DragDrop object, the first argument is the mouse mouse release event, and the second parameter represents the target position of drop. If it is in POINT mode, the id of the target element is passed in, and if it is in INTERSECT mode, an array of drag-and-drop objects that drop the target is passed in.
endDrag(Event e)	The drag-and-drop end event, triggered after the drag-and-drop operation ends, is the mouseup mouse release event.
onDragEnter(Event e, String\| DragDrop[] id)	Enters the drop area event and triggers the first touch of the drop area during drag-and-drop. T he first parameter is the mousemove mouse movement event, and the second parameter represents the drop destination. If it is in POINT mode, the id of the target element is passed in, and if it is in INTERSECT mode, an array of drag-and-drop objects that drop the target is passed in.
onDragOut(Event e, String\| DragDrop[] id)	The drop zone event is triggered when the drop area is left during drag-and-drop. T he first parameter is the mousemove mouse movement event, and the second parameter represents the drop destination. If it is in POINT mode, the id of the target element is passed in, and if it is in INTERSECT mode, an array of drag-and-drop objects that drop the target is passed in.
onDragOver(Event e, String\| DragDrop[] id)	Drag-and-drop move events in the drop zone, triggered when drag-and-drop moves in the drop zone. T he first parameter is the mousemove mouse movement event, and the second parameter represents the drop destination. If it is in POINT mode, the id of the target element is passed in, and if it is in INTERSECT mode, an array of drag-and-drop objects that drop the target is passed in.
onInvalidDrop(Event e)	The drop event cannot be triggered when the drop area is moved, and the parameter is the mousemove mouse movement event.
onMouseDown(Event e)	Mouse down event, the parameter is mousedown mouse down event.
onMouseUp(Event e)	Mouse release event, the parameter is mouseup mouse release event.

Example

Here's a simple example

<!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>

This results in the following:

With the help of Extjs drag-and-drop, we can move data from the grid to the grid and from the grid to the form. The following is an example of moving data between a grid and a form.

Ext.js grid-to-grid drag-and-drop
Ext .js grid to form drag-and-drop