关于一段Jquery代码,不报错但是莫名失效问题

Weason_Ye 2018-06-12 11:59:01

//这里动态添加了图片
function imginit(){
var top = 150;
var left = new Array(650,950);
for(var i = 0; i < 10; i++){
var images = document.getElementById('images');
var tempimg = document.createElement('img');
tempimg.setAttribute('class','img'+(i+1));
tempimg.setAttribute('src','css/images/img'+(i+1)+'.jpg');
tempimg.setAttribute('style','top:'+(top+(Math.floor(i/2)*280))+'px;left:'+left[i%2]+'px;');
images.append(tempimg);
}
}
window.onload = function(){
imginit();}
//选择图片功能,实现将图片拖动到一个目标区域//突然失效//这段代码写在$(document).ready(function{})里了
$('img[class^=img]').on({
mousedown:function(e){
var img = $(this);
var os = img.offset();
sessionStorage.setItem("left",os.left);
sessionStorage.setItem("top",os.top);
e.preventDefault();
dx = e.pageX - os.left;
dy = e.pageY - os.top;
$(document).on('mousemove.drag',function(e){
sessionStorage.setItem("cleft",e.pageX - dx);
sessionStorage.setItem("ctop",e.pageY - dy)
img.offset({top:e.pageY - dy,left:e.pageX - dx});
$("#target").text("请放这里!");//目标区域是一个div//高度宽度都是144px
});
},
mouseup:function(e){
var target = $('#target');
var tos = target.offset();//获取目标区域的top和left
if((tos.left+250) >= sessionStorage.getItem("cleft") && (tos.left-250) <=sessionStorage.getItem("cleft")
&& (tos.top+250) >= sessionStorage.getItem("ctop") && (tos.top-250) <= sessionStorage.getItem("ctop")){
//判断图片是否接触到目标区域
target.css('background',"url("+$(this).prop('src')+")");
target.css('background-size','144px 144px');
}
target.text("");
sessionStorage.setItem('picture',"images/"+$(this).prop('class')+".jpg");
e.preventDefault();
$(document).off('mousemove.drag');
$(this).offset({top:sessionStorage.getItem("top"),left:sessionStorage.getItem("left")});//让拖动的图片弹回原位置
}
});


1、在编写的过程中这段代码是可行的,但是写完另一个页面后,再来调试,就不能拖动了
2、也有可能是下载了apache-tomcat,运行startup.bat修改了啥??下之前还能正常拖动的,当然这只是猜测,很不靠谱。
3、在别人的电脑的谷歌浏览器上也无法实现拖动,试过新建文件复制粘贴、放入tomcat运行(这个直接404了)、修改过可能错误的地方,还是不行,导入js文件的顺序是正确的。
...全文
554 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
Weason_Ye 2018-06-13
  • 打赏
  • 举报
回复
引用 6 楼 ambit_tsai 的回复:
[quote=引用 5 楼 Weason_Ye 的回复:] [quote=引用 4 楼 ambit_tsai 的回复:] [quote=引用 3 楼 Weason_Ye 的回复:] 尝试过放入window.onload里了还是无法实现,放入imginit()也不行,换了原生js再编写还是不行。
这样你在绑定事件的时候把$('img[class^=img]')输出看看,确保能获取到你要的元素。[/quote] 试过了,取得到的,然后呢? 我在绑定时间里试着输出一些值,发现控制台没有输出,说明应该是没有出发那些事件,这该怎么解决?确定了绑定事件的代码是放在window.load里的。[/quote] 你绑定事件的语法是不是有问题?我查了下官方API: .on( events [, selector ] [, data ], handler )

// 示例
$( "p" ).on( "click", function() {
  alert( $( this ).text() );
});
[/quote]
  $('img[class^=img]').on('mousedown',function(e){
      var img = $(this);
      var os = img.offset();
      console.log(os.left);
      sessionStorage.setItem("left",os.left);
      sessionStorage.setItem("top",os.top);
      e.preventDefault();
      dx = e.pageX - os.left;
      dy = e.pageY - os.top;
      $(document).on('mousemove.drag',function(e){
        sessionStorage.setItem("cleft",e.pageX - dx);
        sessionStorage.setItem("ctop",e.pageY - dy)
        img.offset({top:e.pageY - dy,left:e.pageX - dx});
        $("#target").text("请放这里!");
      });
    });
    $('img[class^=img]').on('mouseup',function(e){
      var target = $('#target');
      var tos = target.offset();
      console.log(tos.left);
      if((tos.left+250) >= sessionStorage.getItem("cleft") && (tos.left-250) <=sessionStorage.getItem("cleft")
    && (tos.top+250) >= sessionStorage.getItem("ctop") && (tos.top-250) <= sessionStorage.getItem("ctop")){
      target.css('background',"url("+$(this).prop('src')+")");
      target.css('background-size','144px 144px');
    }
    target.text("");
    sessionStorage.setItem('picture',"images/"+$(this).prop('class')+".jpg");
      e.preventDefault();
      $(document).off('mousemove.drag');
      $(this).offset({top:sessionStorage.getItem("top"),left:sessionStorage.getItem("left")});
    });
改成这样了,还是监听不到点击,很难受,又没有报错,感觉无从下手。 之前用原生js又编过一遍的,还是不行,还是接收不到鼠标点击。 img标签不应该默认是可以拖动的吗(dragable为true),可是我注释掉这些事件后,再去试着拖动图片,没有任何反应。 终于发现错在哪了,不是js代码的问题,是我把一个作为容器的div的z-index值设置大了,挡住了图片。。。崩溃崩溃。 谢谢你耐心帮我想办法啊
ambit_tsai-微信 2018-06-13
  • 打赏
  • 举报
回复
引用 5 楼 Weason_Ye 的回复:
[quote=引用 4 楼 ambit_tsai 的回复:] [quote=引用 3 楼 Weason_Ye 的回复:] 尝试过放入window.onload里了还是无法实现,放入imginit()也不行,换了原生js再编写还是不行。
这样你在绑定事件的时候把$('img[class^=img]')输出看看,确保能获取到你要的元素。[/quote] 试过了,取得到的,然后呢? 我在绑定时间里试着输出一些值,发现控制台没有输出,说明应该是没有出发那些事件,这该怎么解决?确定了绑定事件的代码是放在window.load里的。[/quote] 你绑定事件的语法是不是有问题?我查了下官方API: .on( events [, selector ] [, data ], handler )

// 示例
$( "p" ).on( "click", function() {
  alert( $( this ).text() );
});
Weason_Ye 2018-06-13
  • 打赏
  • 举报
回复
引用 4 楼 ambit_tsai 的回复:
[quote=引用 3 楼 Weason_Ye 的回复:] 尝试过放入window.onload里了还是无法实现,放入imginit()也不行,换了原生js再编写还是不行。
这样你在绑定事件的时候把$('img[class^=img]')输出看看,确保能获取到你要的元素。[/quote] 试过了,取得到的,然后呢? 我在绑定时间里试着输出一些值,发现控制台没有输出,说明应该是没有出发那些事件,这该怎么解决?确定了绑定事件的代码是放在window.load里的。
winzond 2018-06-12
  • 打赏
  • 举报
回复
选择祖先元素绑定事件,语法:$(selector).on(event,childSelector,data,function),祖先元素一定要在绑定事件之前就存在
$("images").on("mousedown","img[class^=img]",function(){......});
ambit_tsai-微信 2018-06-12
  • 打赏
  • 举报
回复
window.onload必须等到页面内(包括图片的)所有元素加载到浏览器中后才能执行。而$(document).ready(function(){})是DOM结构加载完毕后就会执行。 因此,代码中绑定事件是先执行的,然而此时元素都还没初始化呢,so,就不生效了。
ambit_tsai-微信 2018-06-12
  • 打赏
  • 举报
回复
引用 3 楼 Weason_Ye 的回复:
尝试过放入window.onload里了还是无法实现,放入imginit()也不行,换了原生js再编写还是不行。
这样你在绑定事件的时候把$('img[class^=img]')输出看看,确保能获取到你要的元素。
Weason_Ye 2018-06-12
  • 打赏
  • 举报
回复
尝试过放入window.onload里了还是无法实现,放入imginit()也不行,换了原生js再编写还是不行。

87,954

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧