课程表

Ext.js课程

工具箱
速查手册

Ext.js 拖放

当前位置：免费教程 » JS/JS库/框架 » Ext.js

描述

拖放功能是为使开发人员轻松工作而添加的强大功能之一。拖动操作基本上是在某些UI元素上的点击手势，同时按住鼠标按钮并移动鼠标。 在拖动操作后释放鼠标按钮时，会发生放置操作。

语法

将类拖放到可拖动目标。

  1.    var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', {
  2.        isTarget: false
  3.    });

添加拖放目标类到drappable目标

  1.    var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', {
  2.       ignoreSelf: false
  3.    });

例子

下面是一个简单的例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
  5.    <script type="text/javascript" src="/attachements/w3c/ext-all.js"></script>
  6.    <script type="text/javascript">
  7.       Ext.application({
  8.           launch: function() {
  9.               var images = Ext.get('images').select('img');
  10.               Ext.each(images.elements, function(el) {
  11.                   var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', {
  12.                       isTarget: false
  13.                   });
  14.               });
  15.           }
  16.        }); 
  17.       var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', {
  18.          ignoreSelf: false
  19.       });
  20.    </script>
  21.    <style>
  22.       #content{
  23.          width:600px;
  24.          height:400px;
  25.          padding:10px;
  26.          border:1px solid #000;
  27.       }
  28.       #images{
  29.          float:left;
  30.          width:40%;
  31.          height:100%;
  32.          border:1px solid Black;
  33.          background-color:rgba(222, 222, 222, 1.0);
  34.       }
  35.       #mainRoom{
  36.          float:left;
  37.          width:55%;
  38.          height:100%;
  39.          margin-left:15px;
  40.          border:1px solid Black;
  41.          background-color:rgba(222, 222, 222, 1.0);
  42.       }
  43.       .image{   
  44.          width:64px;
  45.          height:64px;
  46.          margin:10px;
  47.          cursor:pointer;
  48.          border:1px solid Black;
  49.          display: inline-block;
  50.       }
  51.    </style>
  52. </head>
  53. <body>
  54.    <div id="content">   
  55.       <div id="images"> 
  56.          <img src = "/extjs/images/1.jpg" class = "image" />
  57.          <img src = "/extjs/images/2.jpg" class = "image" />
  58.          <img src = "/extjs/images/3.jpg" class = "image" />
  59.          <img src = "/extjs/images/4.jpg" class = "image" />
  60.          <img src = "/extjs/images/5.jpg" class = "image" />
  61.          <img src = "/extjs/images/6.jpg" class = "image" />
  62.          <img src = "/extjs/images/7.jpg" class = "image" />
  63.          <img src = "/extjs/images/8.jpg" class = "image" />
  64.       </div>
  65.       <div id="mainRoom"></div>
  66.    </div>
  67. </body>
  68. </html>
  69.  

尝试一下

其他

在Extjs的拖放的帮助下，我们可以将数据从网格移动到网格和网格到窗体。下面是在网格和窗体之间移动数据的例子。

Ext.js 网格到网格拖放
Ext.js 网格到表单拖放

转载本站内容时，请务必注明来自W3xue，违者必究。
 友情链接：直通硅谷 　点职佳 　北美留学生论坛

本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
皖ICP备17017327号-2　皖公网安备34020702000426号