拖放功能是为使开发人员轻松工作而添加的强大功能之一。拖动操作基本上是在某些ui元素上的点击手势，同时按住鼠标按钮并移动鼠标。 在拖动操作后释放鼠标按钮时，会发生放置操作。
将类拖放到可拖动目标。
var dd = ext.create('ext.dd.dd', el, 'imagesddgroup', {
istarget: false
});
添加拖放目标类到drappable目标
var maintarget = ext.create('ext.dd.ddtarget', 'mainroom', 'imagesddgroup', {
ignoreself: false
});
下面是一个简单的例子
<!doctype html>
<html>
<head>
<link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
<script class="lazy" data-original="https://cdn.bootcss.com/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的拖放的帮助下，我们可以将数据从网格移动到网格和网格到窗体。下面是在网格和窗体之间移动数据的例子。
