Ext.js - ड्रैग एंड ड्रॉप
ड्रैग एंड ड्रॉप फीचर, डेवलपर के कार्य को आसान बनाने के लिए जोड़ी गई शक्तिशाली विशेषताओं में से एक है। एक ड्रैग ऑपरेशन, अनिवार्य रूप से, कुछ यूआई तत्व पर एक क्लिक जेस्चर है, जबकि माउस बटन को नीचे रखा जाता है और माउस को स्थानांतरित किया जाता है। ड्रैग ऑपरेशन तब होता है जब माउस बटन को ड्रैग ऑपरेशन के बाद छोड़ा जाता है।
वाक्य - विन्यास
ड्रैग करने योग्य लक्ष्य के लिए ड्रैग और ड्रॉप क्लास को जोड़ना।
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>उपरोक्त कार्यक्रम निम्नलिखित परिणाम का उत्पादन करेगा -
एक्सटज में ड्रैग एंड ड्रॉप की मदद से हम ग्रिड से ग्रिड और ग्रिड से फॉर्म में डेटा स्थानांतरित कर सकते हैं। निम्नलिखित ग्रिड और रूपों के बीच बढ़ते डेटा के उदाहरण हैं।
ड्रैग एंड ड्रॉप - ग्रिड टू ग्रिड
ड्रैग एंड ड्रॉप - ग्रिड टू फॉर्म