当前位置：K88软件开发 → 文章中心 → 编程语言 → JavaScript → Extjs → 文章内容
Ext.js 拖放
减小字体
增大字体由 star333 创建，Loen 最后一次修改 2016-12-28 描述拖放功能是为使开发人员轻松工作而添加的强大功能之一。拖动操作基本上是在某些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 src="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的拖放的帮助下，我们可以将数据从网格移动到网格和网格到窗体。下面是在网格和窗体之间移动数据的例子。Ext.js 网格到网格拖放Ext.js 网格到表单拖放
Ext.js 拖放
