Ext.js - ลากแล้วปล่อย

คุณลักษณะการลากและวางเป็นหนึ่งในคุณสมบัติที่มีประสิทธิภาพที่เพิ่มเข้ามาเพื่อให้งานของนักพัฒนาเป็นเรื่องง่าย โดยพื้นฐานแล้วการลากคือท่าทางการคลิกบนองค์ประกอบ UI บางอย่างในขณะที่กดปุ่มเมาส์ค้างไว้และเลื่อนเมาส์ การทำงานแบบดร็อปเกิดขึ้นเมื่อปล่อยปุ่มเมาส์หลังจากการลาก

ไวยากรณ์

การเพิ่มคลาสลากแล้วปล่อยให้กับเป้าหมายที่ลากได้

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

การเพิ่มคลาสเป้าหมายแบบลากแล้วปล่อยให้กับเป้าหมายที่ลากได้

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

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างง่ายๆ

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

โปรแกรมข้างต้นจะให้ผลลัพธ์ดังต่อไปนี้ -

ด้วยความช่วยเหลือของการลากและวางใน Extjs เราสามารถย้ายข้อมูลจากกริดไปยังกริดและกริดไปยังรูปแบบ ต่อไปนี้เป็นตัวอย่างของการย้ายข้อมูลระหว่างกริดและฟอร์ม

ลากและวาง - Grid to Grid

ลากและวาง - กริดเป็นแบบฟอร์ม