Use native JS to drag images and use js to drag images

Use native JS to drag images and use js to drag images

This article provides examples to illustrate the code used to implement drag and drop image effects in JS and share the Code with you for your reference. The specific content is as follows:

Javascript event objectClientX, offsetX, screenX, pageXDifferences:

There is a compatibility issue when using html5 drag to implement drag-and-drop operations. There are a lot of drag-and-drop plug-in code, but this drag-and-drop demo code is less and compatible with all browsers. It is worth using in projects,

The css style is as follows:

# Div1 {width: 100px; height: 100px; background-color: # 4D4D4D; position: absolute; cursor: pointer;-webkit-box-shadow: 3px 3px 0px 3px # C7C7C7; box-shadow: 3px 3px 3px 0px # C7C7C7;} # parent {width: 500px; height: 500px; border: 1px solid # CDCDCD; position: relative; margin: 0 auto; // set the parent element to background-color: # F4F4F4 ;}. postText {width: 500px; height: 30px; margin: 0 auto; background-color: # F4F4F4 ;}. postText span {padding: 0px 10px ;}

The html code is as follows:

<Div id = "parent"> <div id = "div1" onmousemove = "posMove (this. id) "> </div> <div class =" postText "> Top: <span id =" posTop "> </span> Left: <span id = "posLeft"> </span> </div>

Js Code and comments are as follows:

Function posMove (getdivid) {var oDiv = document. getElementById (getdivid); var oParent = document. getElementById ('parent'); var sent = {l: 10, // sets the div's activity range in the parent element. 10 is equivalent to setting padding-left: 10; r: oParent. offsetWidth-oDiv. offsetWidth, // offsetWidth: the width of the current object. offsetWidth = width + padding + border t: 10, B: oParent. offsetHeight-oDiv. offsetHeight, n: 10} drag (oDiv, sent);}/***** @ param obj: dragged div * @ param sent: set the area where the div can be dragged in the container */function drag (obj, sent) {var dmW = document.doc umentElement. clientWidth | document. body. clientWidth; var dmH = document.doc umentElement. clientHeight | document. body. clientHeight; var sent = sent | |{}; var l = sent. l | 0; var r = sent. r | dmW-obj. offsetWidth; var t = sent. t | 0; var B = sent. B | dmH-obj. offsetHeight; var n = sent. n | 10; obj. onmousedown = function (ev) {var oEvent = ev | event; var sentX = oEvent. clientX-obj. offsetLeft; var sentY = oEvent. clientY-obj. offsetTop; document. onmousemove = function (ev) {var oEvent = ev | event; var slideLeft = oEvent. clientX-sentX; var slideTop = oEvent. clientY-sentY; if (slideLeft <= l) {slideLeft = l;} if (slideLeft >=r) {slideLeft = r;} if (slideTop <= t) {slideTop = t;} if (slideTop> = B) {slideTop = B;} obj. style. left = slideLeft + 'px '; obj. style. top = slideTop + 'px '; document. getElementById ('stop '). innerHTML = slideTop; document. getElementById ('sleft '). innerHTML = slideLeft;}; document. onmouseup = function () {document. onmousemove = null; document. onmouseup = null;} return false ;}}

The above is the implementation code for js drag-and-drop effects, hoping to help you learn.

Articles you may be interested in:

• Native js drag (incompatible with the first lesson)
• Div drag plug-in -- JQ. MoveBox. js (self-made JQ plug-in)
• Javascript drag and drop upload class library DropzoneJS usage
• ExtJS drag result example
• Js perfect div drag-and-drop instance code
• Javascript Implementation of moving a child form by dragging the mouse
• Js drag and drop some common ideas and methods
• Nodejs + express + html5 implement drag-and-drop upload
• Js implementation drag effect
• JS pop-up complete div layer instance that can be dragged and closed