天道酬勤,学无止境

Flex: Why are TileList images disappearing on drag?

I'm developing a Flex Air (desktop) application that loads images from the local filesystem into a TileList. The user will then be able to drag (copy) these images out of the list onto another control.

I've finally got the images showing up correctly (and not disappearing after scrolling the TileList) but they seem to disappear from the TileList at the start of a drag operation.

I come from a .NET background and am just learning AS3/Flex, so if you see me using any anti-patterns here, feel free to point them out!

Sample code follows (I've tried to make this as minimal as possible).


Test.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[

            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;

            [Bindable]
            protected var _pics:ArrayCollection = new ArrayCollection();

            protected function picsList_creationCompleteHandler(event:FlexEvent):void
            {
                const imageFolderPath:String = "c:\\users\\bbrooks\\Pictures";

                var imageDir:File = new File(imageFolderPath);
                var imageFiles:Array = imageDir.getDirectoryListing();
                for each(var imageFile:File in imageFiles)
                {
                    _pics.addItem(new PictureObject(imageFile.nativePath));
                }

                // give images a chance to load
                var timer:Timer = new Timer(1000);
                timer.addEventListener(TimerEvent.TIMER, onTimerExpired);
                timer.start();
            }

            protected function onTimerExpired(event:TimerEvent):void
            {
                picsList.dataProvider = _pics;
            }

        ]]>
    </fx:Script>

    <mx:TileList id="picsList" x="0" y="0" width="100%" height="100%" dragEnabled="true" dragMoveEnabled="false"
                 creationComplete="picsList_creationCompleteHandler(event)" >
        <mx:itemRenderer>
            <fx:Component>
                <mx:Image width="75" height="75" source="{data.image}" />
            </fx:Component>
        </mx:itemRenderer>
    </mx:TileList>

</s:WindowedApplication>


PictureObject.as:

package
{
    import flash.display.Loader;
    import flash.display.LoaderInfo;
    import flash.events.Event;
    import flash.net.URLRequest;

    import mx.controls.Image;

    [Bindable]
    [RemoteClass]
    public class PictureObject extends Object
    {
        protected var _image:Image = null;
        public function get image():Image { return _image; }
        public function set image(newValue:Image):void { _image = newValue; }

        public function PictureObject(path:String)
        {
            var imageLoader:Loader = new Loader();
            imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);
            imageLoader.load(new URLRequest(path));
        }

        protected function onImageLoaded(e:Event):void
        {
            var imageLoader:Loader = LoaderInfo(e.target).loader;
            var bmp:Bitmap = Bitmap(imageLoader.content);

            _image = new Image();           
            _image.smoothBitmapContent = true;
            _image.source = new Bitmap(bmp.bitmapData);
            _image.width = imageLoader.width;
            _image.height = imageLoader.height;
        }
    }
}

评论

I will mostly reply to your secondary question (guessing it will resolve the primary in one fell swoop): as anti-patterns go, this is not a bad example ;)

  1. You are manually loading the images while the Image class has the loading built-in; just give a URL to its source property and it will automatically load it.
  2. You are setting an Image instance as the source of another Image instance; the source property expects URLs or ByteArrays; I'm surprised it doesn't throw an error; the Image class is probably smart enough to extract the source of the other Image instance.
  3. The Timer is redundant. As said, an Image automatically takes care of loading its content.
  4. The s:Image tag isn't wrapped in an ItemRenderer and hence should have no access to a data property: this code shouldn't even compile.
  5. There's no point in having a Bindable property _pics if you don't plan on binding it.
  6. You use the mx TileList. Why not use the more "modern" Spark version? (This doesn't mean the mx class won't work in a Spark application though).

So you have a lot of deleting to do. You can scrap the PictureObject class altogether; remove the Timer code; and just add the URL Strings to the _pics collection. As a plus you could also replace the mx TileList with a Spark List with TileLayout; something like this:

<s:List id="picsList">
    <s:layout>
        <s:TileLayout />
    </s:layout>
    <s:itemRenderer>
        <fx:Component>
            <s:ItemRenderer>
                <s:Image source="{data}" />
            </s:ItemRenderer>
        </fx:Component>
    </s:itemRenderer>
</s:List>

The ActionScript part could be reduced to this:

const imageFolderPath:String = "c:\\users\\bbrooks\\Pictures";

var imageDir:File = new File(imageFolderPath);
var imageFiles:Array = imageDir.getDirectoryListing();
picsList.dataProvider = new ArrayCollection(imageFiles);

Thanks RIAstar. Your answer put me on the track to solving the problem. The new sample code appears below.

The original problem seems to have been with the mx:Image control. Not sure why, but using the s:Image control seems to work.

Granted, this could be accomplished without the PictureObject class at all by simply setting the data source to a list of file paths, but I'm using the image data later and I wanted to get it working by supplying the image data to the custom renderer dynamically.

Test.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;

            import spark.components.Image;

            protected var _pics:ArrayCollection = new ArrayCollection();

            protected function picsList_creationCompleteHandler(event:FlexEvent):void
            {
                const imageFolderPath:String = "c:\\users\\bbbrooks\\Pictures";

                var imageDir:File = new File(imageFolderPath);
                var imageFiles:Array = imageDir.getDirectoryListing();
                for each(var imageFile:File in imageFiles)
                {
                    if (imageFile.extension == "jpg")
                    {
                        _pics.addItem(new PictureObject(imageFile.nativePath));
                    }
                }

                // give images a chance to load
                var timer:Timer = new Timer(1000);
                timer.addEventListener(TimerEvent.TIMER, onTimerExpired);
                timer.start();
            }

            protected function onTimerExpired(event:TimerEvent):void
            {
                picsList.dataProvider = _pics;
            }

        ]]>
    </fx:Script>

    <s:List id="picsList" x="0" y="0" width="100%" height="100%" 
            creationComplete="picsList_creationCompleteHandler(event)"
            dragEnabled="true" dragMoveEnabled="false">
        <s:layout>
            <s:TileLayout />
        </s:layout>
        <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer>
                    <s:Image id="imageDisplay" 
                             width="75" height="75" source="{data.bmp}" /> 
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>
    </s:List>

</s:WindowedApplication>


PictureObject.as

package
{
    import flash.display.Bitmap;
    import flash.display.Loader;
    import flash.display.LoaderInfo;
    import flash.events.Event;
    import flash.net.URLRequest;

    import mx.controls.Image;

    [RemoteClass]
    [Bindable]
    public class PictureObject extends Object
    {
        protected var _bmp:Bitmap = null;
        public function get bmp():Bitmap { return _bmp; }
        public function set bmp(newValue:Bitmap):void { _bmp = newValue; }

        public function PictureObject(path:String)
        {
            var imageLoader:Loader = new Loader();
            imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);
            imageLoader.load(new URLRequest(path));
        }

        protected function onImageLoaded(e:Event):void
        {
            var imageLoader:Loader = LoaderInfo(e.target).loader;

            // create our own copy of the bits in the Loader
            var bmp:Bitmap = Bitmap(imageLoader.content);
            _bmp = new Bitmap( Bitmap(imageLoader.content).bitmapData );
        }
    }
}

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • How to prevent an item being dropped into one TileList from another using Flex?
    I would like to prevent a user dragging certain items from one TileList to another. Whether or not they can be dropped into the TileList should be determined based on data associated with the item. To show that the item cannot be dragged into the TileList I would like to show the normal white cross in red circle icon next to the cursor. If a drop is attempted when it has been determined that drop should not occur I would like to show an alert message explaining why this item could not be dropped.
  • 无法使用 Flex 从剪贴板获取文件数据(Cannot get file data from the clipboard using Flex)
    问题
  • Flex- Bitmapdata from multiple images (drag & dropped)
    Sorry, if the question title is little confusing (not very creative at it :) Here's the problem . I have an image loaded from BitmapData displayed in an Image control. This Image control has dragEnabled and user can drag and drop small images (from a bunch of images in a TileList) on top of it. The image loaded from the Bitmapdata can be different every time with different resolution and the Image control scales it down to fit its fixed with/height. But while saving the image after editing I am saving it with its original width/height. For this purpose I am storing the original Bitmapdata in a
  • Flex- 来自多个图像的位图数据(拖放)(Flex- Bitmapdata from multiple images (drag & dropped))
    问题 对不起,如果问题标题有点混乱(不是很有创意:)这就是问题所在。 我有一个从 BitmapData 加载的图像,显​​示在 Image 控件中。 这个图像控件有dragEnabled,用户可以在它上面拖放小图像(来自TileList 中的一堆图像)。 从 Bitmapdata 加载的图像每次都可能因不同的分辨率而不同,并且图像控件将其缩小以适应其固定的高度/高度。 但是在编辑后保存图像时,我将其保存为原始宽度/高度。 为此,我将原始 Bitmapdata 存储在临时对象中,并在保存之前在其中应用任何编辑。 我的问题是我不知道如何创建组合大图像和放入其中的小图像的图像。 可能是我可以使用显示对象快照,但随后我想保存图像及其原始高度/高度,最好在将其转换为 Bitmapdata 之后。 有关如何解决此问题的任何帮助? 回答1 也许这会有所帮助:http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html#merge() 回答2 除了上一篇文章中的 merge method() 之外,您还可以使用 BitmapData::draw() 方法。 http://help.adobe.com/en_US/FlashPlatform/reference
  • Cannot get file data from the clipboard using Flex
    Given: A Flex TileList with the following event: <mx:nativeDragDrop> <![CDATA[ if(event.clipboard.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)) { var files:Array = event.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array; for each(var file:File in files) { // file.data is null here! } this.listData.refresh(); } ]]> </mx:nativeDragDrop> I am trying to create a list of thumbnails from jpegs that I drag into this TileList. Image.source can use the url to show the image, but I need to scale the image down first (hi rez photos) I already have the scaling part done except that I need
  • 在 Flash CS5 上使用 PHP 和 XML 将图像从 Mysql 加载到 TileList(Load images to a TileList from Mysql using PHP and XML on Flash CS5)
    问题 我有一个 mysql 数据库,其中包含一个包含图像路径的表。 我想将所有图像加载到 TileList。 现在我在 PHP 中有这个: <?PHP mysql_connect("localhost", "root", "root"); mysql_select_db("prototipo"); $result = mysql_query("select entretenimiento_id, e_nombre, e_imagen from entretenimiento"); echo "<?xml version=\"1.0\" ?><entretenimiento>"; while($row = mysql_fetch_assoc($result)) { echo "<e_nombre>" . $row["e_nombre"] . "</e_nombre>"; echo "<e_imagen>" . $row["e_imagen"] . "</e_imagen>"; } echo "</entretenimiento>"; ?> 这应该为我获取图像的路径,名称,因此它出现在显示图像的图块的标签上,并为我带来 ID,以便我可以在单击该图像时启动另一个查询。 所有这些都设置为动态创建的 XML。 现在我的问题......我如何加载这个??? AS3怎么办?? 我已经有
  • Load images to a TileList from Mysql using PHP and XML on Flash CS5
    I have a mysql database with a table containing PATH's to images. I want to load al the images to a TileList. Now i have this in PHP: <?PHP mysql_connect("localhost", "root", "root"); mysql_select_db("prototipo"); $result = mysql_query("select entretenimiento_id, e_nombre, e_imagen from entretenimiento"); echo "<?xml version=\"1.0\" ?><entretenimiento>"; while($row = mysql_fetch_assoc($result)) { echo "<e_nombre>" . $row["e_nombre"] . "</e_nombre>"; echo "<e_imagen>" . $row["e_imagen"] . "</e_imagen>"; } echo "</entretenimiento>"; ?> This is supposed to fetch me the PATH of the image, the name
  • Flex 3 UI ActionScript 编程入门(Getting Started with Flex 3 UI ActionScript Programming)
    问题 在 ActionScript 中开始 Flex 3 UI 编程有什么好的资源吗? 如果有人有任何想法,我在以下方面遇到了一些问题。 它的大小合适,但我的按钮没有显示出来。 有人有想法么? package { import flash.display.*; import mx.controls.Button; import mx.controls.TileList; import mx.controls.sliderClasses.Slider; import mx.controls.ProgressBar; import flash.net.FileReferenceList; [SWF(width="720", height="480", backgroundColor="#ffffff", framerate="30")] public class PhotoUploader extends Sprite { var AddPhotosButton:Button; var RemovePhotoButton:Button; var UploadPhotosButton:Button; public function PhotoUploader():void { stage.scaleMode = StageScaleMode.NO_SCALE; stage.align =
  • GIFPlayer 在 Flex 4.6 AIR 中不起作用(GIFPlayer Not working in Flex 4.6 AIR)
    问题 我正在使用 Flex 4.6 AIR 应用程序。 我正在使用 GIFPlayer 播放动画 gif 文件。 我有一个 TileList,我使用 itemRenderer 来显示这个图像。 问题是它在加载时挂起 AIR 应用程序。 我正在使用 GIFPlayer 库,您可以从这里下载 itemRenderer 的代码如下。 override public function set data(value:Object):void { if(value != null) { super.data = value; var gif:GIFPlayer = new GIFPlayer(); gif.load(new URLRequest(data.image)); var uic:UIComponent = new UIComponent(); uic.addChild(gif); this.addElement(uic); } } 回答1 您的set data最好看起来像: override public function set data(value:Object):void { super.data = value; if(value != null) { gif.load(new URLRequest(data.image)); } }
  • React Native - 当位置在 Android 上是绝对的时,视图消失(React Native - View disappears when position is absolute on Android)
    问题 每当我将此视图的位置样式设置为“绝对”时,它就会消失。 我不知道为什么会这样。 import React, { Component } from 'react'; import { Text, View, Image, TouchableOpacity, StyleSheet } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.mainView}> <View style={styles.parentView}> <TouchableOpacity activeOpacity={0.9} onPress={() => {}}> <View style={ [{position: 'absolute'}, styles.textView] }> <Text style={styles.textViewText}> Just Another Cat </Text> </View> <Image style={[{position: 'absolute'}, styles.imageView]} source={{ uri: 'https://images.pexels.com/photos/104827/cat-pet
  • 更改数据提供程序时如何处理来自 Flash tilelist 的 Unhandled #2044 错误?(How to handle Unhandled #2044 errors from Flash tilelist when changing dataprovider?)
    问题 我有一个使用基于 ImageCell 的自定义项渲染器的 tilelist 组件。 我知道有时无法找到它试图检索的某些图像,我能够通过自定义 ImageCell 加载器上的 IEOrror 侦听器来处理此问题。 但是,如果我设置了数据提供程序,那么在所有图像完成加载或错误过程之前它会被更改,Flash 调试播放器会在 firefox 中抛出一个未处理的 #2044 错误,指出无法找到图像。 在带有调试播放器的歌剧中,它会抛出 #2044 说明加载从未完成。 我找不到捕获和忽略这些错误的方法,因此它们不会抛出调试器播放器对话框。 此外,当使用 Flash Builder IDE 进行调试时,调试器根本不会因这些错误而中断 - 它仅在播放器中,而我能够毫无问题地中断其他错误。 当数据提供程序更改时,就好像错误侦听器正在被处理,但加载程序继续并抛出未处理的 #2044。 关于如何有效处理的任何想法? 提前感谢您的时间和帮助 - 乙 回答1 在自定义单元渲染器的构造函数中,您需要向受保护的加载程序实例添加一个事件侦听器并处理 IOError。 下面是一个例子: package { import fl.controls.listClasses.ICellRenderer; import fl.controls.listClasses.ImageCell; import fl
  • GIFPlayer Not working in Flex 4.6 AIR
    I am working with Flex 4.6 AIR Application. I am using GIFPlayer for play animated gif file. I have a TileList and I use a itemRenderer for displaying this image. The problem is it hangs the AIR application when it loads. I am using the library of GIFPlayer you can download it from HERE The code of itemRenderer is below. override public function set data(value:Object):void { if(value != null) { super.data = value; var gif:GIFPlayer = new GIFPlayer(); gif.load(new URLRequest(data.image)); var uic:UIComponent = new UIComponent(); uic.addChild(gif); this.addElement(uic); } }
  • React Native - View disappears when position is absolute on Android
    Whenever I made the position style 'absolute' for this view, it disappears. I have no idea why it is happening. import React, { Component } from 'react'; import { Text, View, Image, TouchableOpacity, StyleSheet } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.mainView}> <View style={styles.parentView}> <TouchableOpacity activeOpacity={0.9} onPress={() => {}}> <View style={ [{position: 'absolute'}, styles.textView] }> <Text style={styles.textViewText}> Just Another Cat </Text> </View> <Image style={[{position: 'absolute'}, styles
  • Java getSubimage() outside of raster
    I'm trying to take an image and store it in an array of 16x16 subimages. The image I am using is 512x512 pixels. However, while iterating through the loop, getSubimage() is stopped by a Raster exception. Here is the code: public class TileList extends JPanel { private static final int width = 16; //width of a tile private static final int height = width; private int col = 1; private int row = 1; private BufferedImage image; File tilesetImage = new File("image.png"); BufferedImage tileset[]; public void loadAndSplitImage (File loadImage) { try{ image = ImageIO.read(loadImage); }catch(Exception
  • How to handle Unhandled #2044 errors from Flash tilelist when changing dataprovider?
    I have a tilelist component using a custom ImageCell based item renderer. I know that at times some of the images it is trying to retrieve will not be found and I am able to handle this via an IEOrror listener on the custom ImageCell loader. However, if I set the data provider, then it is changed before all images have completed their loading or error process, the flash debug player throws up an unhandled #2044 error in firefox stating that an image could not be found. In opera with the debug player it throws a #2044 stating that a load never completed. I can't find a way to trap and ignore
  • 光栅之外的Java getSubimage()(Java getSubimage() outside of raster)
    问题 我正在尝试拍摄图像并将其存储在16x16子图像的数组中。 我使用的图像是512x512像素。 但是,在遍历循环时,getSubimage()被Raster异常停止。 这是代码: public class TileList extends JPanel { private static final int width = 16; //width of a tile private static final int height = width; private int col = 1; private int row = 1; private BufferedImage image; File tilesetImage = new File("image.png"); BufferedImage tileset[]; public void loadAndSplitImage (File loadImage) { try{ image = ImageIO.read(loadImage); }catch(Exception error) { System.out.println("Error: cannot read tileset image."); }// end try/catch col = image.getWidth()/width; row = image
  • Flex DRAG_DROP 事件 - 是否可以访问被拖动的图像?(Flex DRAG_DROP Event - Is it possible to access the Image Being Dragged?)
    问题 当您启动 Flex 拖动操作时,您会传入要在屏幕上拖动时显示的代理图像。 发生放置时,我希望能够获取此代理,但找不到从 DragEvent 对象获取的方法。 是否可以? 我想要的是在释放鼠标按钮时实际放下拖动的图像...... Flex 会自动在代理上制作一个很好的缩小动画,但我不想要那样。 Flex 示例显示了我不想要的内容 - 删除了代理并添加了一个新图像,但位置不完全正确...... 更多信息:我尝试将我的代理图像作为数据项添加到 DragSource。 当发生下降时,我能够访问它并看到有一个类 mx.managers.dragClasses.DragProxy 它似乎包含我需要的所有信息......但是这个类没有记录? 所以真的有两个问题...如何获取代理并找出代理中鼠标光标的位置,以及如何禁用 Flex 放置动画。 回答1 dragProxy 是 DragManager 上的静态 getter,作用域为 mx_internal。 所以要引用它,你必须做这样的事情: import mx_internal; 在拖动事件处理程序中: var p:* = DragManager.mx_internal::dragProxy; 我不知道你怎么能阻止动画。 如果我知道了,我会告诉你的。 回答2 要禁用 s:List 中的动画,在 dragCompleteHandler 覆盖中
  • 前端面试 - css+html常考知识点总结
    目录 1. 盒子模型 2. flex布局 3. 实现水平居中 4. inline和block 5. 垂直居中 6. 水平垂直居中 7. CSS3新增 8. CSS3伪类 9. JS动画和CSS动画 10. 清除浮动 11. 让元素消失 12. rgba() 和 opacity 的透明效果区别 13. position和display 14. 相对定位与绝对定位 15. CSS样式继承 16. css引入方式 link import 17. css选择器及优先级 18. 行内元素 块级元素 19. BFC 20. 文档流 21. 伪类和伪元素 22. 重绘和重排 23. H5新特性 24. HTML、XML、XHTML 的区别 25. 标签上title属性与alt属性的区别是什么 26. 实现三角形 27. CSS单位有哪些? 28. HTML5的应用缓存 29. 网页制作会用到哪些图片格式 30. 访问超链接后,:hover样式不再出现 31. 什么是FOUC?如何避免 32. 触发硬件加速的CSS属性 33. 服务端渲染 和 客户端渲染 1. 盒子模型 页面上所有的元素对象,其实际的呈现形式都是一个盒子形状的抽象 盒模型有两种, IE怪异盒子模型、W3C标准盒子模型; 盒模型是由: 内容(content)、内边距(padding)、边框(border)、外边距(margin)
  • FabricJS绘图图像消失(FabricJS drawing image disappears)
    问题 我是 FabricJS 库的新手,我将它用于以下目的,我在屏幕左侧有一个可拖动对象,它只能在 y 方向上拖动。 一个函数读出这个对象的 y 位置,然后它取决于我需要绘制的三角形的高度。 但是在绘制三角形 2-3 秒后消失并且不再显示...... 这是我的代码。 function drawObject() { if (being_dragged == true && y <= 440) { document.getElementById(element).style.top = y + 'px'; y_height_1 = y; if (y_height_1 > y_height_2) { y_final--; y_height_2 = y_height_1; } else { y_final++; } drawRoof(); } } function drawRoof() { var canvas = new fabric.Canvas('canvas'); var roof = new fabric.Triangle({ width: 200, height: y_final / 2, fill: 'blue', left: 150, top: 200 }); canvas.add(roof); } 回答1 拖动时是否在创建新对象? 我看不到它的一部分代码。
  • 在HTML中创建拆分窗格的最佳方法(Best way to do a split pane in HTML [closed])
    问题 关门了。 这个问题是基于意见的。 它当前不接受答案。 想改善这个问题吗? 更新问题,以便可以通过编辑此帖子以事实和引用的形式回答。 11个月前关闭。 改善这个问题 是否有很好的技术在HTML中制作可调整大小的拆分窗格? 可以使用CSS / jQuery / JavaScript来完成它,还是有一个好的JavaScript库已被使用? (拆分窗格的一个示例是Internet Explorer中的收藏夹栏,您可能已将其固定在浏览器主窗口的左侧。) 回答1 我想要一个香草的,轻巧的(jQuery UI布局的重量为185 KB),没有依赖项选项(所有现有库都需要jQuery),所以我写了Split.js。 它的重量小于2 KB,不需要任何特殊标记。 它支持较旧的浏览器回到Internet Explorer 9(或带有Polyfill的Internet Explorer 8)。 对于现代浏览器,您可以将其与Flexbox和网格布局一起使用。 回答2 改善Reza的答案: 防止浏览器干扰拖动防止将元素设置为负数防止由于增量增量交互作用以及元素宽度饱和而导致拖动与鼠标不同步 <html><head><style> .splitter { width: 100%; height: 100px; display: flex; } #separator { cursor: col-resize