我有一个container，里面有另外两个containers，并排（如列）。左边的列是一个放置区，右边的container 里面有几个其他的容器，比如洋葱层。他们每个人都有其他几个components。
在最里面的container，在右栏中，我有几张图片需要拖到左栏中。
我已将所有图像设为可拖动，但当我尝试这样做时，我无法将它们拖到其父容器之外。
为什么我不能把它们拖到任何我想要的地方？
消失的图像
【问题讨论】：
标签： javascript extjs drag-and-drop draggable
查看 ExtJs in Action（第 12 章）中的这个示例
您可以从这个 repo 获取代码：https://github.com/ModusCreateOrg/extjs-in-action-examples
如果你能买到这本书，那就太棒了！
HTML 代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="../../ext4/resources/css/ext-all.css"/>
<script type="text/javascript" src="../../ext4/ext-all-debug.js"></script>
<script type="text/javascript" src="dnd_with_elements_using_proxy.js"></script>
<style type="text/css">
body {
padding : 10px;
}
.lockerRoom {
width : 150px;
border : 1px solid;
padding : 10px;
background-color : #ECECEC;
}
.lockerRoom div {
border : 1px solid #FF0000;
background-color : #FFFFFF;
padding : 2px;
margin : 5px;
cursor : move;
}
.pool {
background-color : #ccccff;
}
.hotTub {
background-color : #FFcccc;
}
.lockerRoom div, .lockerRoomChildren {
border : 1px solid #FF0000;
background-color : #FFFFFF;
padding : 2px;
margin : 5px;
cursor : move;
}
.ddProxy {
background-color : #FFFF00;
}
.dropZoneOver {
background-color : #99FF99;
}
.invalidOver {
border : 1px solid #FF0000 !important;
}
</style>
</head>
<body>
<table>
<tr>
<td align='center'>
Male Locker Room
</td>
<td align='center'>
Female Locker Room
</td>
</tr>
<tr>
<td>
<div id="maleLockerRoom" class="lockerRoom">
<div>Jack</div>
<div>Aaron</div>
<div>Abe</div>
</div>
</td>
<td>
<div id="femaleLockerRoom" class="lockerRoom">
<div>Sara</div>
<div>Jill</div>
<div>Betsy</div>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td align='center'>
Pool
</td>
<td align='center'>
Hot Tub
</td>
</tr>
<tr>
<td>
<div id="pool" class="lockerRoom pool"/>
</td>
<td>
<div id="hotTub" class="lockerRoom hotTub"/>
</td>
</tr>
</table>
</body>
</html>
JS代码
Ext.onReady(function() {
// A list of method overrides
var overrides = {
// Called when mousedown for a specific amount of time
startDrag : function() {
var dragProxy = Ext.get(this.getDragEl());
var el = Ext.get(this.getEl());
// Apply CSS styles to the drag element
dragProxy.addCls('lockerRoomChildren');
dragProxy.addCls('ddProxy');
dragProxy.setOpacity(.70);
dragProxy.update(el.dom.innerHTML);
dragProxy.setSize(el.getSize())
//Cache the original XY Coordinates of the element, we'll use this later.
this.originalXY = el.getXY();
//el.hide();
},
// Only called when element is dragged over the a dropzone with the same ddgroup
onDragEnter : function(evtObj, targetElId) {
var targetEl = Ext.get(targetElId);
targetEl.addCls('dropzoneOver');
},
// Only called when element is dragged out of a dropzone with the same ddgroup
onDragOut : function(evtObj, targetElId) {
var targetEl = Ext.get(targetElId);
targetEl.toggleCls('dropzoneOver');
},
// Called when element is dropped not anything other than a
// dropzone with the same ddgroup
onInvalidDrop : function() {
this.invalidDrop = true;
},
// Called upon successful drop of an element on a DDTarget with the same
onDragDrop : function(evtObj, targetElId) {
var dragEl = Ext.get(this.getEl());
var dropEl = Ext.get(targetElId);
if (dragEl.dom.parentNode.id != targetElId) {
dropEl.appendChild(dragEl);
this.onDragOut(evtObj, targetElId);
dragEl.dom.style.position ='';
}
else {
this.onInvalidDrop();
}
},
b4EndDrag : Ext.emptyFn,
endDrag : function() {
var dragProxy = Ext.get(this.getDragEl());
if (this.invalidDrop === true) {
var dragEl = Ext.get(this.getEl());
//el.dom.style.position = 'relative';
// dragEl.dom.style.position = '';
var animCfgObj = {
easing : 'easeOut',
duration : .25,
callback : function() {
//dragEl.dom.style.position = '';
dragProxy.hide();
dragEl.highlight();
}
};
dragProxy.moveTo(this.originalXY[0], this.originalXY[1], animCfgObj);
}
else {
dragProxy.hide();
}
delete this.invalidDrop;
}
};
// Setup the people to be draggable
var maleElements = Ext.get('maleLockerRoom').select('div');
Ext.each(maleElements.elements, function(el) {
var dd = new Ext.dd.DDProxy(el, 'males', {
isTarget : false
});
Ext.apply(dd, overrides);
});
var femaleElements = Ext.get('femaleLockerRoom').select('div');
Ext.each(femaleElements.elements, function(el) {
var dd = new Ext.dd.DDProxy(el, 'females', {
isTarget : false
});
Ext.apply(dd, overrides);
});
var maleLockerRoomDropTarget = new Ext.dd.DropTarget('maleLockerRoom', {
ddGroup : 'males'
});
var femaleLockerRoomDropTarget = new Ext.dd.DropTarget('femaleLockerRoom', {
ddGroup : 'females'
});
// pool and hot tub drop targets
var poolDropTarget = new Ext.dd.DropTarget('pool', {
ddGroup : 'males'
});
poolDropTarget.addToGroup('females');
var hotTubDropTarget = new Ext.dd.DropTarget('hotTub', {
ddGroup : 'males'
});
hotTubDropTarget.addToGroup('females');
});
【讨论】：