个人中心
gpt4 book ai didi

javascript - 如何在 EXTJS 中将图像拖放到其容器之外

转载 作者：行者123 更新时间：2023-11-28 07:31:10 26 4
gpt4 key购买 nike

我有一个容器，里面有另外两个并排的容器(如列)。左栏是一个放置区域，右侧的容器内有几个其他容器，例如洋葱层。它们每个都有其其他几个组件。

在最里面的容器上，在右列中，我有几个图像需要拖动到左列。

我已经将所有图像设置为可拖动，但是当我尝试这样做时，我无法将它们拖动到其父容器之外。

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

example

消失的图像 disappearing

最佳答案

查看 ExtJs in Action(第 12 章)中的示例

您可以从此存储库获取代码: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');


});

关于javascript - 如何在 EXTJS 中将图像拖放到其容器之外，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29110324/

26 4 0
文章推荐： c++ - 嵌入式 RTOS 和使用 malloc/free
文章推荐： c++ - 如果 fstream.open() 在子函数中失败，如何退出程序
文章推荐： c++ - 序列化哪里出错了？
文章推荐： c++ - CMake if(VARIABLE LESS 22) - 如果 VARIABLE 不存在怎么办？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com