Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- html,
- body {
- width:100%;
- height:100%;
- }
- .half-size
- {
- transform:scale(0.5);
- -moz-transform:scale(0.5);
- -webkit-transform:scale(0.5);
- }
- .quarter-size
- {
- transform:scale(0.25);
- -moz-transform:scale(0.25);
- -webkit-transform:scale(0.25);
- }
- #draggable-element {
- width:100px;
- height:100px;
- background-color:#666;
- color:white;
- padding:10px 12px;
- cursor:move;
- position:relative; /* important (all position that's not `static`) */
- display:block;
- }
- var selected = null, // Object of the element to be moved
- x_pos = 0, y_pos = 0, // Stores x & y coordinates of the mouse pointer
- x_elem = 0, y_elem = 0; // Stores top, left values (edge) of the element
- var elem_height = 0;
- var elem_width = 0;
- // Will be called when user starts dragging an element
- function _drag_init(elem) {
- // Store the object of the element which needs to be moved
- selected = elem;
- var boundingRectangle = selected.getBoundingClientRect();
- y_elem = (selected.offsetHeight - (boundingRectangle.bottom - boundingRectangle.top)) / 2;
- x_elem = (selected.offsetWidth - (boundingRectangle.right - boundingRectangle.left)) / 2
- half_elem_height = (boundingRectangle.bottom - boundingRectangle.top) / 2;
- half_elem_width = (boundingRectangle.right - boundingRectangle.left) /2;
- document.addEventListener('mousemove', _move_elem, false);
- document.addEventListener('mouseup', _destroy, false);
- };
- // Will be called when user dragging an element
- function _move_elem(e)
- {
- x_pos = e.clientX;
- y_pos = e.clientY;
- selected.style.left = ((x_pos - x_elem) - half_elem_width) + 'px';
- selected.style.top = ((y_pos - y_elem) - half_elem_height) + 'px';
- }
- // Destroy the object when we are done and remove event binds
- function _destroy() {
- selected = null;
- document.removeEventListener('mousemove', _move_elem);
- document.removeEventListener('mouseup', _destroy);
- }
- // Bind the functions...
- document.getElementById('draggable-element').onmousedown = function () {
- _drag_init(this);
- };
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>JS Bin</title>
- </head>
- <body>
- <div id="draggable-element" class='half-size'>Drag me!</div>
- </body>
- </html>
- // Will be called when user dragging an element
- function _move_elem(e) {
- var el = window.document.body;
- var st = window.getComputedStyle(el, null);
- var tr = st.getPropertyValue("transform") ;
- var values = tr.split('(')[1];
- values = values.split(')')[0];
- values = values.split(',');
- var a = values[0];
- var b = values[1];
- var c = values[2];
- var d = values[3];
- x_pos = document.all ? window.event.clientX : e.pageX;
- y_pos = document.all ? window.event.clientY : e.pageY;
- if (selected !== null) {
- selected.style.left = ((x_pos / a) - x_elem) + 'px';
- selected.style.top = ((y_pos / d) - y_elem) + 'px';
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement