閱讀(64.7k) 書簽贊(8) 我要糾錯

Ext.js 拖放

2022-05-20 14:50 更新

描述

拖放功能是為使開發(fā)人員輕松工作而添加的強大功能之一。拖動操作基本上是在某些UI元素上的點擊手勢，同時按住鼠標(biāo)按鈕并移動鼠標(biāo)。在拖動操作后釋放鼠標(biāo)按鈕時，會發(fā)生放置操作。

語法

將類拖放到可拖動目標(biāo)。

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

添加拖放目標(biāo)類到drappable目標(biāo)

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

事件

方法	描述
startDrag(int x, int y)	開始拖放事件，參數(shù)是x和y的坐標(biāo)值。
onDrag(Event t)	正在拖放事件，當(dāng)拖放一個對象時觸發(fā)，參數(shù)是mousemove鼠標(biāo)移動事件。
onDragDrop(Event e, String\|DragDrop[] id)	正在放下事件，當(dāng)一個對象放到另一個DragDrop對象上時觸發(fā)，第一個參數(shù)是mouseup鼠標(biāo)放開事件，第二個參數(shù)表示drop的目標(biāo)位置。如果是在POINT模式下，就會傳入目標(biāo)元素的id；如果是在INTERSECT模式下，則會傳入放下目標(biāo)的拖放對象數(shù)組。
endDrag(Event e)	拖放結(jié)束事件，在拖放操作結(jié)束之后觸發(fā)，參數(shù)是mouseup鼠標(biāo)放開事件。
onDragEnter(Event e, String\|DragDrop[] id)	進入drop區(qū)域事件，拖放過程中首次觸碰到drop區(qū)域時觸發(fā)。第一個參數(shù)是mousemove鼠標(biāo)移動事件，第二個參數(shù)表示drop目標(biāo)位置。如果是在POINT模式下，就會傳入目標(biāo)元素的id；如果是在INTERSECT模式下，則會傳入放下目標(biāo)的拖放對象數(shù)組。
onDragOut(Event e, String\|DragDrop[] id)	離開drop區(qū)域事件，拖放過程中從drop區(qū)域離開時觸發(fā)。第一個參數(shù)是mousemove鼠標(biāo)移動事件，第二個參數(shù)表示drop目標(biāo)位置。如果是在POINT模式下，就會傳入目標(biāo)元素的id；如果是在INTERSECT模式下，則會傳入放下目標(biāo)的拖放對象數(shù)組。
onDragOver(Event e, String\|DragDrop[] id)	在drop區(qū)域中拖放移動事件，當(dāng)在drop區(qū)域拖放移動時觸發(fā)。第一個參數(shù)是mousemove鼠標(biāo)移動事件，第二個參數(shù)表示drop目標(biāo)位置。如果是在POINT模式下，就會傳入目標(biāo)元素的id；如果是在INTERSECT模式下，則會傳入放下目標(biāo)的拖放對象數(shù)組。
onInvalidDrop(Event e)	不能drop事件，不在drop區(qū)域移動時觸發(fā)，參數(shù)是mousemove鼠標(biāo)移動事件。
onMouseDown(Event e)	鼠標(biāo)按下事件，參數(shù)是mousedown鼠標(biāo)按下事件。
onMouseUp(Event e)	鼠標(biāo)放開事件，參數(shù)是mouseup鼠標(biāo)放開事件。

例子

下面是一個簡單的例子

<!DOCTYPE html>
<html>
<head>
   <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
   <script src="./ext-6.0.0/build/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>