Ext.js: trascina e rilascia
La funzionalità di trascinamento della selezione è una delle potenti funzionalità aggiunte per semplificare il compito dello sviluppatore. Un'operazione di trascinamento, essenzialmente, è un gesto di clic su un elemento dell'interfaccia utente, mentre il pulsante del mouse viene tenuto premuto e il mouse viene spostato. Un'operazione di rilascio si verifica quando il pulsante del mouse viene rilasciato dopo un'operazione di trascinamento.
Sintassi
Aggiunta di classe drag and drop agli obiettivi trascinabili.
var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', {
isTarget: false
});Aggiunta della classe di destinazione drag and drop a target drappable.
var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', {
ignoreSelf: false
});Esempio
Di seguito è riportato un semplice esempio.
<!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>Il programma di cui sopra produrrà il seguente risultato:
Con l'aiuto del trascinamento della selezione in Extjs, possiamo spostare i dati da griglia a griglia e da griglia a modulo. Di seguito sono riportati gli esempi di spostamento dei dati tra griglie e moduli.
Trascina e rilascia - Da griglia a griglia
trascina e rilascia - Da griglia a modulo