js解决movebox移动问题

本文为大家分享了js解决movebox移动问题，并且取消图片默认拖动事件的相关操作，供大家参考，具体内容如下

html:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <link href="../Content/StyleSheet5.css" rel="stylesheet" />
  <script src="../Scripts/JavaScript5.js"></script>
  <title></title>
  <meta charset="utf-8" />
</head>
<body>
  <div id="center">
    <div id="black"></div>
    <div id="movebox">
      <img id="moveimg" src="../Images/b.jpg"/>
    </div>
    <img id="bigimg" src="../Images/b.jpg" />
  </div>
</body>
</html>

js:

var movebox;
window.onload = function () {
  movebox = document.getElementById("movebox");
  movebox.addEventListener("mousedown", function (e) {
    if (e.button > 0) {
      fun2();
      return false;
    }
    e.preventDefault && e.preventDefault(); //明哥：去掉图片拖动响应 狠重要
    gen.x = e.clientX;
    gen.y = e.clientY;
    gen._x = movebox.offsetLeft;
    gen._y = movebox.offsetTop;
    gen.dx = gen.x - gen._x;
    gen.dy = gen.y - gen._y;
    document.addEventListener("mousemove",fun1,false);
    document.addEventListener("mouseup", fun2, false);
  }, false);
};
var fun1 = function (e) {
  gen.L = e.clientX - gen.dx;
  gen.T = e.clientY - gen.dy;
  var timefun = function () {
    window.getSelection().removeAllRanges();
    if (gen.L < 100)
      gen.L = 100;
    else if (gen.L > 200)
      gen.L = 200;
    if (gen.T < 125)
      gen.T = 125;
    else if (gen.T > 175)
      gen.T = 175;
    setLT(movebox, gen.L, gen.T);
  };
  setTimeout(timefun, 2);
};
var fun2 = function () {
  document.removeEventListener("mousemove", fun1, false);
  document.removeEventListener("mouseuo", fun2, false);
};
var gen = {
  x: null,
  y: null,
  _x: null,
  _y: null,
  dx: null,
  dy: null,
  L: null,
  T:null,
};
var setLT = function (dom, L, T) {
  dom.style.left = L + "px";
  dom.style.top = T + "px";
};

css:

body {
  position:absolute;
  margin:0;
  padding:0;
}
#center{
  position:absolute;
  top:200px;
  left:300px;
  width:400px;
  height:400px;
  background-color:#808080;
}
#black{
  position:absolute;
  width:400px;
  height:400px;
  z-index:80;
  background-color:#000;
  opacity:0.6;
}
#bigimg{
  z-index:50;
  position:absolute;
  left:100px;
  top:125px;
}
#movebox{
  z-index:100;
  position:absolute;
  width:100px;
  height:100px;
  left:150px;
  top:150px;
  overflow:hidden;
  cursor:move;
  background-color:#ff6a00;
}
#moveimg{
  position:absolute;
  left:-50px;
  top:-25px;
}

以上就是本文的全部内容，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器

    注意使用preventDefault防止浏览器的默认事件操作发生 复制代码 代码如下: <script language="javascript" type="text/javascript"> var isDrag = false; function isIE(){ if(navigator.userAgent.indexOf("MSIE")>0){return true;} else{return false;} } fun

  • js实现图片拖动改变顺序附图

    js实现图片拖动改变顺序附图

    在web页面中,需要改变多个元素的位置,可以通过元素拖动来实现.HTML5中加入了一个全局属性draggable,通过设置true/false来控制元素是否可拖动. 下面以图片拖动为例,用jQuery来实现:页面上有多个图片,把一个图片拖动到其他两个图片中间,就可以将这个图片的位置插入到两图之间. 复制代码 代码如下: <!DOCTYPE html> <html> <head> <style> .img-div img { width:200px; heig

  • avalon js实现仿微博拖动图片排序

    avalon js实现仿微博拖动图片排序

    下文针对仿微博图片随意拖动,调整图片的顺序,讲解的很详细,文章肯定还有欠缺的地方,欢迎提出批评改正.废话不多说了,看具体内容吧. 点击此处进入源码下载 什么是拖动图片排序? 就像微博这种,上传后允许用户通过拖动图片,调整几张图片的顺序. 可以看到微博在这里把每张图片固定了尺寸,稍微严谨点的话,就需要像上一篇文章那样,外面是响应式的等高等宽的若干div容器,里面则是等比例缩放的响应式图片. 下面说下要求. 1.当然首先图片要可以拖动. 2.图片移出其原本的位置,拖动到目标位置并且未松开鼠标完成拖动

  • avalon js实现仿google plus图片多张拖动排序附源码下载

    avalon js实现仿google plus图片多张拖动排序附源码下载

    源码下载:http://xiazai.jb51.net/201509/yuanma/drag_sort1(jb51.net).rar 效果展示如下: google plus 拖动+响应式效果: 要求 1. 两边对齐布局,即图片间间距一致,但左右两边的图片与边界的间距不一定等于图片间间距,兼容ie7,8,firefox,chrome. 2. 浏览器尺寸变化,在大于一定尺寸时,每行自动增加或减少图片,自动调整图片间间距,以满足两边对齐布局,这时每张图片尺寸固定(这里是200*200px):而小于一定

  • js用拖动滑块来控制图片大小的方法

    本文实例讲述了js用拖动滑块来控制图片大小的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv=Content-Type content="text/html;charset=gb2312"> <title&g

  • div拖拽插件——JQ.MoveBox.js(自制JQ插件)

    有一段时间没更新博客了,都不知道忙些什么,学习也没什么进展,惭愧. 这一周空闲的时间学着自己写一下JQ插件. 以前用原生的JS做过类似拖拽div的效果,现在按原思路改做成一个JQ的小插件,当作制作JQ插件的一个小练习. html为 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit

  • avalonjs实现仿微博的图片拖动特效

    avalonjs实现仿微博的图片拖动特效

    效果: HTML: <div id='post_img' ms-controller='post_img'> <ul id='post_img_inner' ms-mousemove='onmousemove'> <li ms-repeat-el="post_img_list" class='inline-block' ms-mousedown='onmousedown($event,$index,el)' ms-attr-id='post_img_ite

  • js解决movebox移动问题

    本文为大家分享了js解决movebox移动问题,并且取消图片默认拖动事件的相关操作,供大家参考,具体内容如下 html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link href="../Content/StyleSheet5.css"

  • JS解决IOS中拍照图片预览旋转90度BUG的问题

    JS解决IOS中拍照图片预览旋转90度BUG的问题

    上篇文章[Js利用Canvas实现图片压缩功能]中做了图片压缩上传,但是在IOS真机测试的时候,发现图片预览的时候自动逆时针旋转了90度.对于这个bug,我完全不知道问题出在哪里,接下来就是面向百度编程了.通过度娘找到了相关资料,解决方法记录在此.这个问题的具体因素其实我还是不清楚是为何导致的,只有IOS和部分三星手机会出现此bug. 绝大部分的安卓机并无此问题. 解决此问题需要引入一个第三方 JS 库: exif.js 下载地址:https://github.com/exif-js/exif-

  • JS解决移动web开发手机输入框弹出的问题

    在移动web开发中和pc端不同的是,手机的输入是软键盘,这样就会有个问题,那就是当有输入的时候,键盘弹起来,整个页面难免会发生变化 1.页面提高背景会出现不够用的现象, 解决方法,在body中设置背景图,即便是页面抬升了,背景也依旧存在, 2.底部用fix布局 这个问题会使得页面提升而底部的fix也跟着提升,遮盖住相应的页面,这个有两种解决方法 一.是页面页相应的提高,页面变化多少我们让上面的页面滚动多少, $('input').bind('click',function(e){ var $th

  • Web表单提交之disabled问题js解决方法

    本文实例讲述了Web表单提交之disabled问题js解决方法.分享给大家供大家参考.具体分析如下: 例如,有如下表单 复制代码 代码如下: <form id="inputForm" action="shorttermrental.action" method="post">      <input name="pname" type="text" id="pname"

  • 利用JS解决ie6不支持max-width,max-height问题的方法

    今天遇到一个关于用js解决ie6不支持支持max-width,max-height的问题,刚开始用jQuery方法来实现,不过一直获取不到css里面的值,如 复制代码 代码如下: if($.browser.msie && $.browser.version == 6.0)  {    var maxWidth = parseInt($('.viewBigPic img').css('max-width'));    $('.viewBigPic img').each(function(){

  • js解决软键盘遮挡输入框的问题分享

    js解决软键盘遮挡输入框的问题分享

    经验须知 弹出软键盘时: ios端$('body').scrollTop()会改变 android端$(window).height()会改变 拉起键盘不是一瞬间,而是有一个缓动过程 问题重现 ios端,经常会出现输入法遮挡输入框的问题(特别是那种有一个白色顶部的输入法,如:百度输入法),如图: 问题解决 我们只需要在输入框聚焦之后,开启一个定时器,执行$('body').scrollTop(1000000),这样由于整个body滚动到了最下面,输入框自然就看见了,具体请查看以下示例 示例源码

  • vue中利用iscroll.js解决pc端滚动问题

    项目中经常遇到区域超出部分会出现滚动条,滚动条在pc端可以通过鼠标滚轮控制上下,在移动端可以通过鼠标拖动页面进行滚动,这两种场景都是符合用户习惯,然而这种滚动条一般都是竖[vertical]项滚动条,如果pc端出现横向滚动条[horizontal],在不做处理的情况下,你只能用鼠标拖动横向滚动条按钮[scrollerbar]展示滚动区域,而且为了美观,一般滚动条会进行样式编写或者隐藏,那么横向区域默认情况下就没法滚动. 二.描述 现为了解决pc端滚动区域能像移动端一样,能够通过鼠标拖动滚动区域直

  • 关于vue 结合原生js 解决echarts resize问题

    解决页面echarts 图表 resize问题 左侧的菜单栏模块是可以收缩的,点击左上角的 icon 可以收缩,但是点击左上角的icon后,右侧的echarts图并未进行对应的收缩,使用 element-resize-detector 插件能够解决问题(如何解决Vue项目中使用echarts,宽度变化导致图不能resize问题)但是会有点卡顿,所以采用原生的方法来处理,再结合windows 自带的原生 resize 事件处理 浏览器宽度高度变化,可以不使用插件来处理问题了. <template>

  • vue.js 解决v-model让select默认选中不生效的问题

    笔者今天在开发中遇到一个看起来很神奇的问题,平时编辑的页面我们select下拉选框利用vue.js 的v-model来实现自动选中,今天无论如何都选不中,后来经过很久的复查和大神的一句话终于解决这个这个问题,顺便分享一下. 问题 先上代码: 上图是前端的H5页面 下面是js代码: 一眼看上好像也没有什么问题.js 在初始化的时候,调用后台接口,取到数据然后传递给vue里面定义的data里面.并且前端页面除了select不能正常选中,其他的input 框的数据也都全部显示出来了(因为涉及一些机密的

  • node.js解决客户端请求数据里面中文乱码的事件方法

    node.js解决客户端请求数据里面中文乱码的事件方法

    node.js解决客户端请求数据里面中文乱码的事件 例如代码: var http = require('http'); var server = http.createServer(); server.on('request',function(req,res){ // res.end("hello world"); res.end("你好 世界"); }); server.listen(3000,function(){ console.log("Serv

随机推荐