拖放功能是为使开发人员的任务变得简单而添加的强大功能之一.实际上,拖动操作是某个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中的拖放功能,我们可以移动数据网格到网格和网格形成.以下是在网格和表单之间移动数据的示例.
拖放 - 网格到网格
拖放 - 网格到表格