Mouseup,mousedown,mousemove, popup drag effect, JavaScript

Source: Internet
Author: User

<script type= "text/javascript" >
var dialoginstace, Onmovestartid, Mousepos = {x:0,y:0}; Used to record objects that are currently draggable
var zIndex = 9000;
Get Element Object
function g (ID) {return document.getElementById (ID);}
Auto Center element (el = Element)
function AutoCenter (EL) {
var bodyw = document.documentElement.clientWidth;
var bodyh = document.documentElement.clientHeight;
var ElW = el.offsetwidth;
var ElH = el.offsetheight;
El.style.left = (BODYW-ELW)/2 + ' px ';
El.style.top = (BODYH-ELH)/2 + ' px ';
}
Auto-extend element to all display area
function Filltobody (EL) {
El.style.width = document.documentElement.clientWidth + ' px ';
El.style.height = document.documentElement.clientHeight + ' px ';
}
Methods of dialog instantiation
function Dialog (Dragid, Moveid) {
var instace = {};
Instace.dragelement = g (Dragid); Elements allowed to perform drag-and-drop operations
Instace.moveelement = g (Moveid); Moving elements during drag and drop operations
Instace.mouseoffsetleft = 0; The starting X point of the moving element when dragging
instace.mouseoffsettop = 0; Move the starting Y point of the element when dragging
Instace.dragElement.addEventListener (' MouseDown ', function (e) {
var e = e | | window.event;
Dialoginstace = Instace;
Instace.mouseoffsetleft = E.pagex-instace.moveelement.offsetleft;
Instace.mouseoffsettop = E.pagey-instace.moveelement.offsettop;
Onmovestartid = SetInterval (onmovestart,10);
return false;
Instace.moveElement.style.zIndex = ZIndex + +;
})
return instace;
}
Listening for mouse bounce events in the page
Document.onmouseup = function (e) {
Dialoginstace = false;
Clearinterval (Onmovestartid);
}
Document.onmousemove = function (e) {
var e = window.event | | E
Mousepos.x = E.clientx;
Mousepos.y = E.clienty;
E.stoppropagation && e.stoppropagation ();
E.cancelbubble = true;
e = this.originalevent;
E && (E.preventdefault e.preventdefault (): E.returnvalue = False);
Document.body.style.MozUserSelect = ' None ';
}
function Onmovestart () {
var instace = Dialoginstace;
if (instace) {
var MaxX = document.documentelement.clientwidth-instace.moveelement.offsetwidth;
var maxy = document.documentelement.clientheight-instace.moveelement.offsetheight;
Instace.moveElement.style.left = Math.min (Math.max ((Mousepos.x-instace.mouseoffsetleft), 0), MaxX) + "px";
Instace.moveElement.style.top = Math.min (Math.max ((Mousepos.y-instace.mouseoffsettop), 0), Maxy) + "px";
}
}
Readjust the position and mask of the dialog box and show
function ShowDialog () {
G (' Dialogmove '). style.display = ' block ';
G (' mask '). style.display = ' block ';
AutoCenter (g (' dialogmove '));
Filltobody (g (' mask '));
}
Close the dialog box
function Hidedialog () {
G (' Dialogmove '). style.display = ' None ';
G (' mask '). style.display = ' None ';
}
Listen for browser window size changes
Window.onresize = ShowDialog;
Dialog (' Dialogdrag ', ' dialogmove ');
ShowDialog ();
</script>

Mouseup,mousedown,mousemove, popup drag effect, JavaScript

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.