案例:Extjs案例     状态:可编辑再运行    进入竖版
 运行结果 
AخA
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
   <link href="//cdn.bootcss.com/extjs/6.2.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
5
   <script type="text/javascript" src="//cdn.bootcss.com/extjs/6.2.0/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;