html中写入啥代码使浏览器不能被拖动，就是左右拖动！

Posted 2023-05-09

html中写入什么代码使浏览器不能被拖动，就是左右拖动！

　　HTML元素textarea浏览器中固定大小和禁止拖动
　　textarea标签定义多行的文本输入控件。
　　文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
　　HTML 标签 textarea 在大部分浏览器中只要指定行（rows）和列（cols）属性，就可以规定 textarea 的尺寸，大小就不会改变，不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果不同，可以拖动右下角图标改变大小。
　　但是过分拖动大小会影响页面布局，使页面变得不美观。可以通过添加如下两个样式禁用拖动，固定大小：
　　1：彻底禁用拖动（推荐）；
　　resize: none;

　　2：只是固定大小，右下角的拖动图标仍在；
　　width: 260px;

　　height: 120px;
　　max-width: 260px;
　　max-height: 120px; 参考技术A 浏览器不能左右拖动？你是说窗口还是网页内容？窗口的话据我所知办不到，根本超出了html的范畴，网页内容的话你使用overflow-x:hidden来限定超出范围的显示方式，就不会有滚动条了。 参考技术B 你说的左右拖动 是指可以用浏览器下面的滚动条左右拖动嘛

在sencha extjs疯狂拖放

我是sencha extjs的初学者。

我有一个拖放sencha extjs的问题，我的代码基于拖放的官方示例，但它不能完全工作，也就是说，它只能通过左右，左右和自底向上拖动文件来工作，当我从上到下拖动时，它变得疯狂。

注意：官方示例的工作原理是从面板的任一侧拖动文件。

视图代码

Ext.define('KitchenSink.view.drag.File', {
    extend: 'Ext.panel.Panel',
    xtype: 'drag.file',

    controller: 'drag.file',

    requires: [
        'Ext.layout.container.Fit'
    ],

    title: 'File Drag',
    draggable: true,
    width: 500,
    height: 300,
    bodyPadding: 5,
    layout: 'fit',

    bodyCls: 'drag-file-ct',

    html: '<div class="drag-file-label">' +
        'Drop some files here' +
        '</div>' +
        '<div class="drag-file-icon"></div>'
});

controllerView的代码

Ext.define('KitchenSink.view.drag.FileViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.drag.file',

    requires: ['Ext.drag.Target'],

    afterRender: function(view) {
        var body = view.body;

        if (window.File && window.FileList && window.FileReader) {
            this.target = new Ext.drag.Target({
                element: body,
                listeners: {
                    scope: this,
                    dragenter: this.onDragEnter,
                    dragleave: this.onDragLeave,
                    drop: this.onDrop
                }
            });
        } else {
            body.down('.drag-file-label').setHtml(
                'File dragging is not supported by your browser'
            );
            body.el.addCls('nosupport');
        }
    },

    onDragEnter: function() {
        this.getView().body.addCls('active');
        //console.log("Enter");    
    },

    onDragLeave: function() {
        this.getView().body.removeCls('active');
        //console.log("Fuera");    
    },

    onDrop: function(target, info) {
        var view = this.getView(),
            body = view.body,
            icon = body.down('.drag-file-icon');

        body.removeCls('active').addCls('dropped');
        icon.addCls('fa-spin');

        var me = this,
            files = info.files,
            len = files.length,
            s;

        if (len > 1) {
            s = 'Dropped ' + len + ' files.';
        } else {
            s = 'Dropped ' + files[0].name;
        }

        Ext.toast({
            html: s,
            closable: false,
            align: 't',
            slideInDuration: 400,
            minWidth: 400
        });

        me.timer = Ext.defer(function() {
            if (!view.destroyed) {
                icon.removeCls('fa-spin');
                icon.fadeOut({
                    callback: function() {
                        body.removeCls('dropped');
                        icon.setOpacity(1);
                        icon.show();
                    }
                });
            }
            me.timer = null;
        }, 2000);
    },

    destroy: function() {
        Ext.undefer(this.timer);
        this.target = Ext.destroy(this.target);
        this.callParent();
    }
});

答案

我相信问题是你错过了额外的CSS规则。例如，您必须禁止所有指针事件，否则拖动图标容器顶部将导致触发“dragleave”事件。

以下是您需要的完整规则，以及小提琴示例：小提琴：https://fiddle.sencha.com/#view/editor&fiddle/2hac

.drag-file-ct .x-innerhtml {
  pointer-events: none;
}

.drag-file-fadeout {
  opacity: 0;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.drag-file-label {
  font-size: 18px;
  padding-top: 30px;
  text-align: center;
  pointer-events: none;
}

.drag-file-icon {
  font-family: FontAwesome;
  display: block;
  font-size: 64px;
  margin-top: 50px;
  text-align: center;
  pointer-events: none;
}
.active .drag-file-icon {
  display: block;
}
.active .drag-file-icon:after {
  content: "f058";
  color: #8BC34A;
}
.dropped .drag-file-icon {
  display: block;
}
.dropped .drag-file-icon:after {
  content: "f013";
  color: #9E9E9E;
}
.nosupport .drag-file-icon {
  display: block;
}
.nosupport .drag-file-icon:after {
  content: "f119";
  color: #9E9E9E;
}

另一答案

FIDDLE

我在开头的小提琴中也有这个问题，但后来我用元素id body替换了目标元素asdasd并且它起作用了。看起来像关于图层。