addEventDelegate 드래그 앤 드롭에서 놓기 후 실행되지 않음

Question

두 목록간에 드래그 앤 드롭 기능을 구현하려고합니다.

목록 항목을 목록간에 드래그 앤 드롭 할 수 있습니다. 그러나 놓기 후에 요소를받는 두 번째 목록은 더 이상 삭제되지 않습니다.

DOM을 검사 한 결과 해당 목록에 삭제 가능한 클래스 "ui-droppable"이없는 것으로 나타났습니다. 이 클래스는 OnAfterRendering을 확장하여 jquery 플러그인을 사용하여 목록에 추가되었습니다.

List를 수신 한 후에 List가 다시 렌더링되면 Delegated Events를 호출하지 않는다는 점도 알게되었습니다.

기본적으로 위임 된 이벤트를 호출하지 않기 때문에 기능성을 내 드래그 가능 목록에 다시 추가하려면 어떻게해야합니까?

코드 :

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 
       } 
      }); 
     } 
    }); 
}