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
ลากและวาง - กริดเป็นแบบฟอร์ม