android连续拖动导致挂起的解决方法
作者:hebedich 时间:2021-08-06 07:11:39
当我保持对连续将对象拖有时在移动后 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,连续拖动,导致挂起
0
投稿
猜你喜欢
解决RabbitMq消息队列Qos Prefetch消息堵塞问题
2021-11-17 17:36:13
深入学习Kotlin 枚举的简洁又高效进阶用法
2022-11-05 02:39:11
Java Hibernate使用SessionFactory创建Session案例详解
2022-03-04 06:21:28
Spring整合mybatis实现过程详解
2022-05-23 02:10:23
C#中RSA加密与解密的实例详解
2022-09-01 15:43:06
Android仿知乎客户端关注和取消关注的按钮点击特效实现思路详解
2022-08-05 19:49:02
C# 函数返回多个值的方法详情
2022-01-05 05:47:11
基于C#动手实现网络服务器Web Server
2023-01-21 20:13:28
Java中闭包简单代码示例
2023-11-08 23:09:48
Java通过Scanner了解if...else if语句
2023-11-29 04:28:44
MyBatis全局配置文件详解
2021-09-19 10:13:32
C#中的IEnumerable接口深入研究
2022-04-06 11:13:42
C# 清除cookies的代码
2021-08-14 20:10:10
Java基础之堆内存溢出的解决
2023-11-10 20:06:30
Spring Security实现HTTP认证
2021-10-31 14:21:47
Android SharedPreferences存储用法详解
2023-08-07 08:25:34
使用webmagic实现爬虫程序示例分享
2021-10-08 22:10:26
Struts2 文件上传进度条的实现实例代码
2023-04-20 11:13:59
Android实现缓存大图到SD卡
2022-07-13 07:13:50
Android实现手指触控图片缩放功能
2021-06-07 17:08:00