jquery拖放挂起或卡住Android浏览器

Posted 2023-03-25

【中文标题】jquery拖放挂起或卡住Android浏览器

【英文标题】：jquery drag drop hangs or gets stuck for android browser

【发布时间】：2014-12-31 04:12:18

【问题描述】：

见下面的链接 http://liveweave.com/JckSgC

当我尝试拖放项目时，项目卡在移动屏幕上的某个位置而没有被拖放到可拖放区域，

当我点击某处并开始工作时（这基本上发生在我第一次打开页面时）

可能是什么问题，我该如何解决？

下面是代码

js代码

(function () 
    var canvas = new fabric.Canvas('canvas');
    var canvas_el = document.getElementById('canvas');
    var canvas1 = new fabric.Canvas('canvas1');

    var group;
    fabric.Image.fromURL('img/blank.png', function (img) 
        var img1 = img.set(
            left: 0,
            top: 0
        );
        fabric.Image.fromURL('img/blank.png', function (img) 
            var img2 = img.set(
                left: 0,
                top: 0
            );
            group = new fabric.Group([img1, img2], 
                left: 0,
                top: 0
            );
            canvas.add(group)
        );
    );


    fabric.Image.fromURL('img/blank.png', function (img) 
        var img1 = img.set(
            left: 0,
            top: 0
        );
        fabric.Image.fromURL('img/blank.png', function (img) 
            var img2 = img.set(
                left: 0,
                top: 0
            );
            group1 = new fabric.Group([img1, img2], 
                left: 0,
                top: 0
            );
            canvas1.add(group1)
        );
    );



    $(document).ready(function () 



        /* Define drag and drop zones */
        var $drop = $('#canvas-drop-area,#canvas-drop-area1'),
            $gallery = $('td > #image-list li'),
            $draggedImage=null;

        /* Define the draggable properties */
        $gallery.draggable(
             helper: 'clone',
            start: function (e) 
            $draggedImage=event.target;
                $drop.css(
                    'display': 'block'
                )
            ,
            stop: function () 
                $(this).find('img').css(
                   /* 'opacity': 0.4 */
                );
                $drop.css(
                    'display': 'none'
                );
                $draggedImage=null;
            ,
            revert: true
        );

        /* Define the events for droppable properties */
        $drop.droppable(
            over: function (event, ui) 
                $(this).addClass('active');
            ,
            drop: function (event, ui) 
                var image =$draggedImage&& $draggedImage.src;
                console.log($draggedImage.alt);
                img_to_canvas(image,$draggedImage.alt,$(event.target).is("#canvas-drop-area")?1:2);
            ,
            out: function (event, ui) 
                $(this).removeClass('active');
            ,
            deactivate: function (event, ui) 
                $(this).removeClass('active');
            
        );

    );


    var img_to_canvas = function(image,sendfront,checkcanvas) 
        var img = new Image();
        img.src = image;
        if(checkcanvas =='1')
            if(sendfront=='top')
                fabric.util.loadImage(img.src, function (img) 
                    group.item(0).setElement(img);
                        canvas.renderAll();
                ); 
            else
                fabric.util.loadImage(img.src, function (img) 
                    group.item(1).setElement(img);
                        canvas.renderAll();
                ); 
            
            canvas.calcOffset();  
        else
            if(sendfront=='top')
                fabric.util.loadImage(img.src, function (img) 
                    group1.item(0).setElement(img);
                        canvas1.renderAll();
                );         
            else
                fabric.util.loadImage(img.src, function (img) 
                    group1.item(1).setElement(img);
                        canvas1.renderAll();
                ); 
            
            canvas1.calcOffset();       
        

    


)();

【问题讨论】：

PC 上的网络浏览器有足够的内存来处理数据和事件，而这个故事在移动浏览器上是颠倒的，就 android 而言，Android OS 会杀死内存寻找进程和线程。现在您的问题取决于许多平板，1.您的设备是否具有像 2 或 3 GB 这样的良好内存？ 2. 您的移动设备是否支持硬件加速？ 3. 您的移动设备上已经运行了多少应用程序。

请自行提供相关代码...

jquery 拖放功能需要大量 RAM 和处理，因为在拖动时，它将完整的对象存储在内存中并为每个移动进行大量计算。因此，拖放在系统上完美运行，它也适用于高端设备，而且并非所有移动浏览器都支持拖放功能。

如何解决上述问题？？

我有完全相同的问题：/...虽然它有时会起作用...但每隔一段时间，它就会开始像你描述的那样表现。重新启动浏览器暂时解决了这个问题，我（重新加载页面不会）。

【参考方案1】：

如果您使用的是 JQuery，请尝试使用以下名为 touchpunch 的 javascript 库，并确保在包含 JQuery 后包含它。

http://touchpunch.furf.com/

我记得在我开始使用 touchpunch 之前，我在移动设备上进行测试时遇到了很多关于拖放应用程序的问题。