JS实现网页图片拖动

function isIE(){
  if(navigator.userAgent.indexOf("MSIE")>0){return true;}
  else{return false;}
}
function addListener(element,e,fn){
  if(isIE()){element.attachEvent("on" + e,fn);}
 else{element.addEventListener(e,fn,false);}
}
function drag(e){
 var e = e || window.event;
 var element = e.srcElement || e.target;
 if(e.preventDefault)e.preventDefault();
 else e.returnvalue=false;
 isDrag = true;
 var relLeft = e.clientX - parseInt(element.style.left);
 var relTop = e.clientY - parseInt(element.style.top);
 element.onmouseup = function(){ isDrag = false; }
 document.onmousemove = function(e_move){
   var e_move = e_move || window.event;
   if(isDrag){
     element.style.left=e_move.clientX - relLeft + "px";
     element.style.top=e_move.clientY - relTop + "px";
     return false;
   }
 }
}

调用部分 addListener
var img = imgList[i];
addListener(img,"mousedown",drag);

界面元素部分
<img class="myImg" style="width:600px;height:600px;left:600px;top:0px;position:absolute;cursor:pointer;" src="${setting[‘files.contextpath‘]!}/${(p.propertyValue)}"/>
                    
必须实现left top position

时间: 2024-08-06 14:19:11

JS实现网页图片拖动的相关文章

使用html2canvas js 截取网页图片下载

1.前台使用html2canvas js 截取Div元素转存为图片,下载.效果: 2.前台代码 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <meta charset="utf-8"

JS控制网页图片斜向滚动(图片除了上、下、左、右滚动,还有斜向滚动哦)

<html><head><title>图片斜向移动</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head><body background="http://p18.qhimg.com/t010e15dc26698ab2a8.png"><script

js中网页图片自动更换的效果

<script> var arr=new Array(); arr[0]="url(images/city.jpg)"; arr[1]="url(images/desert.jpg)"; arr[2]="url(images/flower.jpg)"; var i=0; function changeimage() { if(i==3) { i=0; } var div=document.getElementById("ap

js实现图片拖动改变顺序

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

html实现 页面禁止右键 禁止复制 禁止图片拖动 禁止复制和剪切

众所周知,一般的屏蔽的方法是用JS来编写的脚本,但是也可以直接通过修改网页属性的方法来屏蔽右键 禁止复制. 禁止右键 oncontextmenu="return false" 禁止复制和剪切: oncopy="return false;" oncut="return false;" 禁止复制 onselectstart="return false" 禁止图片拖动 ondragstart="return false&q

js获取网页的各种高度

网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document.body.scrollWidth网页正文全文高: document.body.scrollHeight网页被卷去的高: document.body.sc

Atitit.&#160;html&#160;使用js显示本地图片的设计方案.doc

Atitit. html 使用js显示本地图片的设计方案.doc 1.  Local mode  是可以的..web模式走有的不能兰.1 2. IE8.0 显示本地图片 img.src=本地图片路径无效的解决方案1 2.1. div来完成 .filter1 2.2. URL.createObjectURL (html5 api  ma sida)2 2.3. Css 背景(吗四大)2 2.4. 这是Data URI scheme (base64).2 3. --code2 4. 参考2 1.  

JS获取网页宽高方法集合

JS获取网页宽高等方法的集合:document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高 document.body.offsetWidth - 网页可见区域宽,包括边线和滚动条的宽document.body.offsetHeight - 网页可见区域高,包括边线和滚动条的高[FF,chrom下是整个页面高,IE opera 下正常] document.body.scrollWidth - 网页总宽documen

制作手机使用的网页图片查看器

这几天抽空在为项目开发一个量身的图片查看器,目前已初步完成需求 开发场景是:在一个多文件下载展示列表中,如检测某些文件为图片时,则点击该文件时打开图片查看器展示该图片,并将列表内其它图片同时展示查看器队列内,可供前后滑动查看及其它附带功能 乍一听功能点似乎有点多而且有些复杂,需要梳理一下 功能点整理 首先,我们要获得点击的图片文件对象及符合条件的图片文件对象集 其次,图片查看器的制作及图片队列展示 然后,图片友好加载方式 最后,图片查看器触摸滑动及滑动后相关功能的实现 简单整理了一下,好像也不多