Ext.js - Sürükle ve Bırak

Sürükle ve bırak özelliği, geliştiricinin görevini kolaylaştırmak için eklenen güçlü özelliklerden biridir. Sürükleme işlemi, esasen, bazı UI öğelerinde fare düğmesi basılı tutulurken ve fare hareket ettirilirken yapılan bir tıklama hareketidir. Sürükleme işleminden sonra fare düğmesi bırakıldığında bir bırakma işlemi gerçekleşir.

Sözdizimi

Sürüklenebilir hedeflere sürükle ve bırak sınıfı ekleme.

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

Sürükle ve bırak hedef sınıfını drappable hedefe ekleme.

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

Misal

Aşağıdaki basit bir örnektir.

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

Yukarıdaki program aşağıdaki sonucu verecektir -

Extj'lerde sürükle ve bırak yardımı ile verileri ızgaradan ızgaraya ve ızgaradan forma taşıyabiliriz. Aşağıda, ızgaralar ve formlar arasında veri taşıma örnekleri verilmiştir.

Sürükle ve bırak - Grid to Grid

sürükle ve bırak - Grid to Forma