Extjs案例 - W3xue在线HTML/CSS/JS运行工具

<!DOCTYPE html>
<html>
<head>
   <link href="//cdn.bootcss.com/extjs/6.2.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="//cdn.bootcss.com/extjs/6.2.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 = "/img/eg_landscape2.jpg" class = "image" />
         <img src = "/img/eg_landscape.jpg" class = "image" />
         <img src = "/img/eg_landscape3.jpg" class = "image" />
         <img src = "/img/eg_greanfoliage.jpg" class = "image" />
         <img src = "/img/eg_tulip.jpg" class = "image" />
         <img src = "/img/sun.jpg" class = "image" />
         <img src = "/img/mercury.jpg" class = "image" />
         <img src = "/img/venus.jpg" class = "image" />
      </div>
      <div id="mainRoom"></div>
   </div>
</body>
</html>

AخA
 
<!DOCTYPE html>
<html>
<head>
   <link href="//cdn.bootcss.com/extjs/6.2.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="//cdn.bootcss.com/extjs/6.2.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;