addEventDelegate拖放後拖放不會觸發

Question

我試圖在兩個列表之間實現拖放功能。

我可以將列表項從一個列表拖放到另一個列表。然而，在下降之後，第二個列表（它接收到該元素）不能再放棄。

我檢查了DOM並發現該列表沒有droppable類「ui-droppable」。這個類通過擴展OnAfterRendering使用jquery插件droppable添加到列表中。

我也發現，一旦List在收到元素後重新呈現，它就不會調用委託事件。

因此，基本上，我如何將funcationality添加回我的可拖動列表中，因爲它不調用委託事件？

代碼：

XML列表：

 <HBox justifyContent="SpaceBetween"> 
     <items> 
      <List 
       headerText='Players' 
       id='players' 
       items='{/players}'> 
       <layoutData> 
        <FlexItemData growFactor="1" /> 
       </layoutData> 
       <items> 
        <ObjectListItem 
         title="{name}" > 
         <attributes> 
          <ObjectAttribute 
          title='Role' 
          text="{role}" /> 
          <ObjectAttribute 
          title='Rating' 
          text="{rating}" /> 
         </attributes> 
        </ObjectListItem> 
       </items> 
       </List> 

       <List 
       headerText='Playing XI' 
       id='playing' 
       items='{playing>/playing}'> 
       <layoutData> 
        <FlexItemData growFactor="1" /> 
       </layoutData> 
       <items> 
        <StandardListItem 
         title="{playing>name}" /> 
       </items> 
       </List> 
     </items> 
    </HBox> 

控制器：

oDragList.addEventDelegate({ 
      "onAfterRendering": function(oEvent) { 
       $("#" + idDragList + "-listUl li").sortable({ 
         revert: true 
       }); 
       $("#" + idDragList + "-listUl li").draggable({ 
        helper: "clone" 
       }); 
      } 
     }); 

     oDragList.addEventDelegate({ 
      "onAfterRendering": function(oEvent) { 
       $("#" + oDropListId + "-listUl li").sortable({ 
         revert: true 
       }); 

       $("#" + oDropListId).droppable({ 
        drop: function(evt, ui) { 
//      debugger; 
         var oControl = ui.draggable.control()[0]; 
//      debugger; 
         var oContext = oControl.getBindingContext().getObject(); 
         var srcControl = evt.srcControl, 
          oPlayingModel = srcControl.getModel("playing"); 

         oPlayingModel.getProperty("/playing").push(oContext); 
         oPlayingModel.refresh(); 
        } 
       }); 



      } 
     }); 

虛擬數據：將前

var data = [ 
      { 
       name:"Sachin Tendulkar", 
       role:"Batsman", 
       rating:"100" 
      }, 

      { 
       name:"Saurav Ganguly", 
       role:"Batsman", 
       rating:"78" 
      } 
]; 

DOM：

DOM拖動後：

Answer 1

我認爲這個問題是在您的控制器。我試着用下面的代碼。當我放在第二個名單上時，它正在發射事件。

onInit : function() { 
    var dragList = this.getView().byId("players"); 
    dragList.addEventDelegate({ 
     "onAfterRendering": function(oEvent) { 
      $("#" + dragList.getId() + "-listUl li").sortable({ 
       revert: true 
      }); 
      $("#" + dragList.getId() + "-listUl li").draggable({ 
       helper: "clone" 
      }); 
     } 
    }); 

    var dropList = this.getView().byId("playing"); 
    dropList.addEventDelegate({ 
     "onAfterRendering": function(oEvent) { 
      $("#" + dropList.getId() + "-listUl li").sortable({ 
       revert: true 
      }); 
      $("#" + dropList.getId()).droppable({ 
       drop: function(evt, ui) { 
        //You will get your event here. You can do your stuff 
       } 
      }); 
     } 
    }); 
}