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