Sencha Ext JS 4 드래그 앤 드롭이 제대로 작동하는 데 문제가 있습니다

저는 extjs 4를 배우려고 시도하고 있으며 지난 며칠 동안 드래그 앤 드롭으로 어려움을 겪었습니다. 나는 뷰포트와 1 개의 패널로 간단한 어플리케이션을 만들려고 시도했다. 패널을 드래그 할 수있게 설정했습니다 : true이고 뷰포트는 드롭 존입니다. 내가 뷰포트 주위로 패널을 드래그하려고하면 불규칙하게 이동합니다. 이 내 두 개의 파일이 있습니다 http://youtu.be/6WRf5j_CAR0 Sencha Ext JS 4 드래그 앤 드롭이 제대로 작동하는 데 문제가 있습니다

이 동작의 짧은 비디오 클립은 는

Ext.Loader.setConfig({ 
    enabled: true 
}); 

Ext.application({ 
    name: 'CS', 

    appFolder: 'ccms/app', 
    autoCreateViewport: true, 

    controllers: [ 
    // 'TestCreator', 
     // 'Primary', 
    // 'Manager' 
    ], 

    launch: function(){ 

     var viewport = Ext.ComponentQuery.query('viewport'); 

     if(viewport.length > 0) 
      viewport[0].add([{ 
       xtype: 'panel', 
       width: 300, 
       height: 300, 
       draggable: true 
      }]); 

    } 
});

을 app.js Viewport.js

Ext.define('CS.view.Viewport', { 
    extend: 'Ext.container.Viewport', 
// layout: 'fit', 

    listeners: { 
     render: function(sender){ 

      console.log(sender); 

      sender.dropZone = new Ext.dd.DropZone(sender.container, { 

       getTargetFromEvent: function(e) { 

        console.log('getTargetFromEvent'); 

        var temp = { 
         x: e.getX() - this.DDMInstance.deltaX, 
         y: e.getY() - this.DDMInstance.deltaY 
        }; 

        console.log(temp); 
        return temp; 

       }, 

       // On entry into a target node, highlight that node. 
       onNodeEnter : function(target, dd, e, data){ 
       // Ext.fly(target).addCls('my-row-highlight-class'); 
       }, 

       // On exit from a target node, unhighlight that node. 
       onNodeOut : function(target, dd, e, data){ 
       // Ext.fly(target).removeCls('my-row-highlight-class'); 
       }, 

       onNodeOver : function(target, dd, e, data){ 
        return Ext.dd.DropZone.prototype.dropAllowed; 
       }, 

       onNodeDrop : function(target, dd, e, data){ 

        console.log('onNodeDrop'); 
        data.panel.setPosition(target.x, target.y, true); 
        return true; 

       } 
      }); 



     } 
    } 

})

인덱스입니다. html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Cobar Systems Continuity Suite</title> 

    <link rel="stylesheet" type="text/css" href="http://themis.dev/ccms/resources/css/ext-all.css"> 
    <script type="text/javascript" src="http://themis.dev/ccms/extjs/bootstrap.js"></script> 
    <script type="text/javascript" src="http://themis.dev/ccms/app.js"></script> 


</head> 
<body> 
</body> 
</html>

아무도 나에게 무슨 일이 일어나는지 말해 줄 수 있습니까?

내가 내선 JS 4.07과 4.1 베타이 시도했습니다

, 동일한 결과

출처

2012-01-28 Casey Flynn

구성 요소가 비록 ] (http://stackoverflow.com/questions/8558564/panel-drag-and-drop-is-not-working-in-extjs-4-1). 아마도 그것은 당신을 도울 수 있습니다 (적어도 가이드 라인으로). – sbgoran

DOM 요소에 패널을 변경해야합니다 패널은 여기 [비슷한 질문에 대답

listener: { 
render: function (panel) { 
    var PanelEl = Ext.get(panel.id); 
    sender.dropZone = new Ext.dd.DropZone(PanelEl, { 
      //... 
     } 
    }

출처

2013-07-05 07:01:43 Feroz

Sencha Ext JS 4 드래그 앤 드롭이 제대로 작동하는 데 문제가 있습니다

답변

관련 문제