android连续拖动导致挂起的解决方法

 更新时间:2015年05月10日 15:48:30   投稿:hebedich  
本文给大家分享的是在安卓的项目开发中遇到连续拖动对象,导致挂起的问题的解决方法,也是经过很多网友的提示,最终才找到解决方法,这里记录一下,分享给大家。

当我保持对连续将对象拖有时在移动后 5 6 拖/滴,看到有时不获取对象还原不回来,我不能用于以后。

基本上我有对两个对象组的 canvas 在 time 可以有最大的两个图像不是更多比,也看到图像

为什么会发生呢,我们如何防止?

(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();    
    }

  }
})();

解决方法

更改

$drop.droppable({
  over: function (event, ui) {
    $(this).addClass('active');
  },
  drop: function (event, ui) {
    var image =$draggedImage&& $draggedImage.src;


$drop.droppable({
    over: function(event, ui) {
      $(this).addClass('active');
    },
    drop: function(event, ui) {
      $draggedImage = ui.draggable.find("img").get(0);

以上所述就是本文的全部内容了,希望大家能够喜欢。

相关文章

  • android 如何判断当前是否为飞行模式

    android 如何判断当前是否为飞行模式

    android 开发过程中如何判断当前是否是飞行模式和侦听airplane mode change,本文将以此问题详细介绍,需要了解的朋友可以参考下
    2012-11-11
  • Android自定义实现一个车牌字母选择键盘

    Android自定义实现一个车牌字母选择键盘

    这篇文章主要为大家详细介绍了Android如何自定义实现一个车牌字母选择键盘,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-06-06
  • Android 矢量室内地图开发实例

    Android 矢量室内地图开发实例

    这篇文章主要介绍了Android 矢量室内地图开发实例的相关资料,这里提供代码实例,及实现效果图,矢量室内对图简单DEMO,需要的朋友可以参考下
    2016-11-11
  • Android编程实现AlertDialog自定义弹出对话框的方法示例

    Android编程实现AlertDialog自定义弹出对话框的方法示例

    这篇文章主要介绍了Android编程实现AlertDialog自定义弹出对话框的方法,结合实例形式分析了Android AlertDialog自定义弹出对话框的基本功能与事件监听实现技巧,需要的朋友可以参考下
    2017-07-07
  • Android显式启动与隐式启动Activity的区别介绍

    Android显式启动与隐式启动Activity的区别介绍

    为什么要写显式启动与隐式启动Activity,Android的Acitivity启动大致有两种方式:显式启动与隐式启动,下面分别介绍
    2014-09-09
  • android自定义Camera拍照并查看图片

    android自定义Camera拍照并查看图片

    这篇文章主要为大家详细介绍了android自定义Camera拍照并查看图片,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Android Studio 下 Flutter 开发环境搭建过程

    Android Studio 下 Flutter 开发环境搭建过程

    这篇文章主要介绍了Android Studio 下 Flutter 开发环境搭建/Flutter / Dart 插件安装 | Flutter SDK 安装 | 环境变量配置 | 开发环境检查,本文图文并茂给大家介绍的非常详细,需要的朋友可以参考下
    2020-03-03
  • Android实现简单画图画板

    Android实现简单画图画板

    这篇文章主要为大家详细介绍了Android实现简单画图画板,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • Android编程自定义菜单实现方法详解

    Android编程自定义菜单实现方法详解

    这篇文章主要介绍了Android编程自定义菜单实现方法,结合实例形式分析了Android自定义菜单的布局、动画及功能相关实现技巧与注意事项,需要的朋友可以参考下
    2017-02-02
  • Android串口操作方法实例

    Android串口操作方法实例

    这篇文章主要介绍了Android串口操作方法实例,本文共分5个步骤讲解了Android串口操作方法,并给出代码实例,需要的朋友可以参考下
    2015-04-04

最新评论