Extjs 实现元素标签拖拽

新建 Demo.html 页面如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="Scripts/bootExtJS.js"></script>
    <script src="Scripts/Demo.js"></script>
    <style>
        .thumb-wrap1 {
            font: 12px Arial, Helvetica, sans-serif;
            float: left;
            margin: 5px;
            background: #fcf8e3;
            margin-right: 0;
            padding: 5px;
            height: 30px;
            text-align: center;
            border: 1px solid #F39C12;
            cursor: pointer;
        }
        .x-btn-default-toolbar-small {
            border-color: #d1d1d1;
            background-image: url(../Images/button.gif);
        }

        .x-btn-default-toolbar-small-over {
            border-color: #81a4d0;
        }

        .x-btn-default-toolbar-small-focus {
            border-color: #81a4d0;
        }
    </style>
</head>
<body>
    <div id="columnsDispPanel"></div>
</body>
</html>

新建 Demo.js 如下：

Ext.onReady(function () {

    var columnData = [
        ["1#机", "01"], ["2#机", "02"], ["3#机", "03"], ["4#机", "04"],
        ["5#机", "05"], ["6#机", "06"], ["7#机", "07"],
        ["8#机", "08"], ["欢迎交流", "09"], ["认真搞好技术", "10"], ["感谢大家支持", "11"],
        ["喜欢就点个赞", "12"]
    ];

    var columnStore = new Ext.data.ArrayStore({
        fields: ['fieldName', 'fieldOid'],
        data: columnData
    });

    var selectedColumnStore = new Ext.data.ArrayStore({
        fields: ['fieldName', 'fieldOid'],
        data: []
    });

    var columnsView = Ext.create('Ext.view.View', {
        store: columnStore,
        id: 'columnsViewOid',
        xtype: 'dataview',
        tpl: [
            '<tpl for=".">',
                '<div class="thumb-wrap1" id="{fieldOid}">',
                '<div style="padding-left: 3px;">{fieldName}</div></div>',
            '</tpl>',
            '<div class="x-clear"></div>',
        ],
        trackOver: true,
        itemSelector: '.thumb-wrap1'
    });

    var selectedColumnsView = Ext.create('Ext.view.View', {
        store: selectedColumnStore,
        id: 'selectedColumnsViewOid',
        xtype: 'dataview',
        tpl: [
            '<tpl for=".">',
                '<div class="thumb-wrap1" id="{fieldOid}">',
                '<div style="padding-left: 3px;">{fieldName}  <img border="0" src="../images/closeGray_Normal.gif" width="14px" height="14px" onclick = "deleteViewItem({fieldOid})"/></div></div>',
            '</tpl>',
            '<div class="x-clear"></div>',
        ],
        trackOver: true,
        itemSelector: '.thumb-wrap1'
    });


    Ext.create('Ext.Panel', {
        id: 'columnsDispPanelOid',
        autoScroll: true,
        width: 600,
        height: 350,
        renderTo: 'columnsDispPanel',
        bodyPadding: 5,
        layout: 'border',
        defaults: {
            split: true
        },
        items: [
            {
                xtype: 'panel', region: 'west', margin: '0 2 0 0', flex: 1, items: columnsView,
                tbar: [
                    { xtype: 'displayfield', value: '<span style="color:#;font-weight:bolder;height:20px;line-height:19px;margin-left:3px"> Columns </span>', margin: '0 2 0 0' }
                ]
            },
            {
                xtype: 'panel', region: 'center', items: selectedColumnsView,
                tbar: [
                    { xtype: 'displayfield', value: '<span style="color:#04408c;font-weight:bolder;height:20px;line-height:15px;margin-left:3px"> Selected Columns </span>', margin: '0 2 0 0' },
                    '-',
                    {
                        xtype: 'button',
                        //icon: '../images/refresh_Hover.png',
                        text: 'Reset',
                        id: 'selectedColumnResetID',
                        textAlign: 'right'
                    }
                ],
            }
        ]
    });


    /**
    * Drag zone overrides
    */
    var dragZoneOverrides = {
        containerScroll: true,
        scroll: false,
        getDragData: function (evtObj) {
            var columnsDataView = Ext.getCmp('columnsViewOid');
            var sourceEl = evtObj.getTarget(columnsDataView.itemSelector, 10);
            if (sourceEl) {
                var selectedNodes = columnsDataView.getSelectedNodes();
                var dragDropEl = document.createElement('div');
                if (selectedNodes.length < 1) {
                    selectedNodes.push(sourceEl);
                }
                Ext.each(selectedNodes, function (node) {
                    dragDropEl.appendChild(node.cloneNode(true));
                });
                return {
                    ddel: dragDropEl,
                    repairXY: Ext.fly(sourceEl).getXY(),
                    dragRecords: columnsDataView.getRecord(sourceEl),
                    sourceDataView: columnsDataView
                };
            }

        },
        getRepairXY: function () {
            return this.dragData.repairXY;
        }
    };


    var onDragZoneCfg = Ext.apply({}, {
        ddGroup: 'columnDDGrp',
        dataView: Ext.getCmp('columnsViewOid')
    }, dragZoneOverrides);

    new Ext.dd.DragZone(Ext.getCmp('columnsViewOid').getEl(), onDragZoneCfg);


    /**
    * Drop zone overrides
    */
    var dropZoneOverrides = {
        onContainerOver: function () {
            return this.dropAllowed;
        },
        onContainerDrop: function (dropZone, evtObj, dragData) {
            var selectedColumnDataView = Ext.getCmp('selectedColumnsViewOid');
            var dragRecords = dragData.dragRecords;
            var store = selectedColumnDataView.store;
            var dupFound = false;
            Ext.each(dragRecords, function (record) {
                var found = store.findBy(function (r) {
                    return r.data.fieldName === record.data.fieldName;
                });
                if (found > -1) {
                    dupFound = true;
                }
            });

            if (!dupFound) {
                selectedColumnDataView.store.add(dragRecords.data);
            } else {
                Ext.MessageBox.alert('Warning', dragRecords.data.fieldName + ' already exist.');
            }
            return true;
        }
    };

    var onDropZoneCfg = Ext.apply({}, {
        ddGroup: 'columnDDGrp',
        dataView: Ext.getCmp('selectedColumnsViewOid')
    }, dropZoneOverrides);

    var onDropZone = new Ext.dd.DropZone(Ext.getCmp('selectedColumnsViewOid').ownerCt.el, onDropZoneCfg);

    deleteViewItem = function (oid) {
        var viewName = 'selectedColumnsViewOid';
        var delItems = [];
        var currentSelectedColumns = Ext.getCmp(viewName).store.data.items;
        Ext.Array.forEach(currentSelectedColumns, function (currentSelectedColumn, index) {
            if (currentSelectedColumn.data.fieldOid == oid) {
                delItems.push(currentSelectedColumn);
                Ext.getCmp(viewName).store.remove(delItems);
            }
        })
    }

});

运行效果如下：

Extjs 实现元素标签拖拽

猜你喜欢