Ext.js - Kéo và thả
Tính năng kéo và thả là một trong những tính năng mạnh mẽ được thêm vào để làm cho nhiệm vụ của nhà phát triển trở nên dễ dàng. Về cơ bản, thao tác kéo là một cử chỉ nhấp vào một số phần tử giao diện người dùng, trong khi nút chuột được giữ và di chuyển chuột. Thao tác thả xảy ra khi thả nút chuột sau thao tác kéo.
Cú pháp
Thêm lớp kéo và thả vào các mục tiêu có thể kéo.
var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', {
isTarget: false
});Thêm lớp mục tiêu kéo và thả vào mục tiêu có thể kéo.
var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', {
ignoreSelf: false
});Thí dụ
Sau đây là một ví dụ đơn giản.
<!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>Chương trình trên sẽ tạo ra kết quả sau:
Với sự trợ giúp của kéo và thả trong Extjs, chúng ta có thể di chuyển dữ liệu từ lưới sang lưới và lưới để tạo thành. Sau đây là các ví dụ về di chuyển dữ liệu giữa các lưới và biểu mẫu.
Kéo và thả - Grid to Grid
kéo và thả - Grid to Form