基于extjs的拖动效果

最新推荐文章于 2023-12-05 22:44:46 发布

李高钢

最新推荐文章于 2023-12-05 22:44:46 发布

阅读量983

点赞数

分类专栏：网页设计 javascript

本文链接：https://blog.csdn.net/ligaogang/article/details/78073212

版权

javascript 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

网页设计

5 篇文章 0 订阅

订阅专栏

前言：ExtJs是一个基于js封装了近300个类的框架，其属于面向对象的编程方法，mvc的设计模式，代码简洁，少量的代码即可实现强大的功能，无需写繁重的html代码。

废话不说，直接上代码：

一个拖动图片的功能：

<!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 = "1.jpg" class = "image" />
<img src = "2.jpg" class = "image" />
<img src = "3.jpg" class = "image" />
<img src = "4.jpg" class = "image" />
<img src = "5.jpg" class = "image" />
<img src = "6.jpg" class = "image" />
<img src = "7.jpg" class = "image" />
<img src = "8.jpg" class = "image" />
</div>
<div id="mainRoom"></div>
</div>
</body>
</html>