Question

我有一个container内部有两个containers，并排（如列）。左colunm是一个放置区域，rigth container内部有几个其他容器，如洋葱层。他们每个人都有其他几个components。

在最里面的container，在右栏中，我有几张图片需要拖到左栏。

我已将所有图片拖动，但当我尝试这样做时，我无法将它们拖到父容器之外。

为什么我不能把它们拖到我想要的任何地方？

example

消失的形象 disappearing

Answer 1

从ExtJs in Action（第12章）

中查看此示例

您可以从此repo获取代码：https://github.com/ModusCreateOrg/extjs-in-action-examples

如果你能买到这本书真的很棒！

HTML code：

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


});

如何在EXTJS中将图像拖放到其容器外部

1 个答案: