<script><br />//目标源<br />var target;<br />//拖拽辅助容器<br />var helper;<br />//鼠标默认状态(false=没有按下)<br />var iMouseDown=false;<br />//当前的目标源<br />var ctar;<br />//鼠标偏移量<br />var mouseOff;<br />//ajax相关<br />var ajax;<br />//继承number类的NANA0,用途为:如果一个数为100px会返回100。<br />Number.prototype.NaN0=function(){return isNaN(this)?0:this;}<br />//初始化AJAX<br />function createRequest(){<br />var ajax;<br />if(window.ActiveXObject){<br /> try{<br /> ajax = new ActiveXObject("Microsoft.XMLHTTP");<br /> }catch(e){<br /> ajax = false;<br /> }<br />}else{<br /> try{<br /> ajax = new XMLHttpRequest();<br /> }catch(e){<br /> ajax = false;<br /> }<br />}<br />if(!ajax){<br /> alert("Error creating the XMLHttpRequest object.");<br />}else{<br /> return ajax;<br />}<br />}<br />//反送AJAX请求<br />function cutp(cutC){<br />ajax=createRequest();<br />ajax.onreadystatechange = action;<br />//发送请求的URL<br />url = "path=./test1.jpg&x="+parseInt(cutC.style.left)+"&y="+parseInt(cutC.style.top)+"&width="+parseInt(cutC.offsetWidth)+"&height="+parseInt<br />(cutC.offsetHeight);<br />window.status = url;<br />ajax.open("GET", "image.php?"+url, true);<br />ajax.send(null);<br />}<br />function action(){<br />var show = document.getElementById("show");<br />//如果SHOW这个容器原先有子节点,就清楚子节点<br />if(show.hasChildNodes()){<br /> show.removeChild(show.childNodes[0]);<br />}<br />//状态为4&200的时候返回信息<br />if(ajax.readyState==4&&ajax.status==200){<br /> show.innerHTML = ajax.responseText;<br />}<br />}<br />//创建可拖拽容器<br />function createContainer(arg){<br />helper = document.getElementById('helper');<br />//设置属性<br />helper.setAttribute("cut",1);<br />arg.onmouseover = function(){<br /> helper.style.display="block";<br />}<br />arg.onmouseout = function(){<br /> helper.style.display="none";<br />}<br />helper.ondblclick = function(){<br /> cutp(helper);<br />}<br />}<br />//获取鼠标位置<br />function mouseCoords(ev){<br />if(ev.pageX || ev.pageY){<br /> return {x:ev.pageX, y:ev.pageY};<br />}<br />return {<br /> x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,<br /> y:ev.clientY + document.body.scrollTop - document.body.clientTop<br />};<br />}<br /><br />//获取鼠标在当前容器的偏移量<br />function getMouseOffset(target, ev){<br />ev = ev || window.event;<br />var docPos = getPosition(target);<br />var mousePos = mouseCoords(ev);<br />return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};<br />}<br />//获取鼠标相对父节点的偏移量<br />function getPosition(e){<br />var left = 0;<br />var top = 0;<br />while (e.offsetParent){<br /> left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);<br /> top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);<br /> e = e.offsetParent;<br />}<br />left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);<br />top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);<br />return {x:left, y:top};<br />}<br />//鼠标移动处罚的函数<br />function mouseMove(ev){<br />ev = ev||window.event;<br />var tar = ev.target||ev.srcElement;<br />var mousePos = mouseCoords(ev);<br />var rootar = tar.parentNode;<br />var mouseOf = getPosition(rootar);<br />//判断状态<br />if(iMouseDown&&mouseOff){<br /> var limLefX=mouseOf.x+rootar.offsetWidth-tar.offsetWidth;<br /> var limBottomY =mouseOf.y+rootar.offsetHeight-tar.offsetHeight;<br /> var conLeft = mousePos.x-mouseOff.x;<br /> var conTop = mousePos.y-mouseOff.y;<br /> if(conLeft>=mouseOf.x&&conLeft<=limLefX){<br /> helper.style.left = mousePos.x-mouseOff.x;<br /> }<br /> if(conTop>=mouseOf.y&&conTop<=limBottomY){<br /> helper.style.top = mousePos.y-mouseOff.y;<br /> }<br />}<br />}<br /><br />//鼠标按键起来的函数<br />function mouseUp(){<br />iMouseDown = false;<br />}<br /><br />//按下鼠标按键的函数<br />function mouseDown(ev){<br />iMouseDown = true;<br />ev = ev||window.event;<br />var tar = ev.target||ev.srcElement;<br />if(tar.getAttribute("cut")){<br /> var hmouseOff = getPosition(tar);<br /> helper.style.left = hmouseOff.x;<br /> helper.style.top = hmouseOff.y;<br /> mouseOff = getMouseOffset(tar,ev);<br />}<br />}<br />//监听事件<br />document.onmouseup = mouseUp;<br />document.onmousemove = mouseMove;<br />document.onmousedown = mouseDown;<br />window.onload=function(){<br />target = document.getElementById("image");<br />createContainer(target);<br />}<br /></script>

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
