Javascript 如何在EXTJS中将图像拖放到其容器外
我有一个Javascript 如何在EXTJS中将图像拖放到其容器外,javascript,extjs,drag-and-drop,draggable,Javascript,Extjs,Drag And Drop,Draggable,我有一个容器，里面有另外两个容器，并排（如列）。左边的colunm是一个放置区，rigth容器内部有几个其他容器，如洋葱层。它们每个都有几个其他的组件 在最里面的容器的右栏中，我有几个图像需要拖到左栏 我已经使所有图像都可以拖动，但是当我尝试这样做时，我无法将它们拖动到其父容器之外 为什么我不能把它们拖到我想去的地方 消失的图像 查看ExtJs中的示例（第12章） 您可以从该回购协议获取代码： 如果你能买到这本书，那真是太棒了 HTML代码： <html> <head>
容器容器容器组件容器查看ExtJs中的示例（第12章） 您可以从该回购协议获取代码： 如果你能买到这本书，那真是太棒了 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>
当我拖动鼠标离开“红色”容器时，图像继续消失。没有代码很难帮助@JoãoGomes请阅读第12章iI。我相信你会发现问题所在，也会提高你对DD类的理解。我解决了这个问题：克隆图像节点并在放置区周围创建一个dragZone
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');
});