jquery - How can we drag and move an image with JavaScript? -

jquery - How can we drag and move an image with JavaScript? -

i find , little alter code have code that, link

fiddle

code:

function position(x, y) { this.x = x; this.y = y; this.add = function(val) { var newpos = new position(this.x, this.y); if(val != null) { if(!isnan(val.x)) newpos.x += val.x; if(!isnan(val.y)) newpos.y += val.y } homecoming newpos; } this.subtract = function(val) { var newpos = new position(this.x, this.y); if(val != null) { if(!isnan(val.x)) newpos.x -= val.x; if(!isnan(val.y)) newpos.y -= val.y } homecoming newpos; } this.min = function(val) { var newpos = new position(this.x, this.y) if(val == null) homecoming newpos; if(!isnan(val.x) && this.x > val.x) newpos.x = val.x; if(!isnan(val.y) && this.y > val.y) newpos.y = val.y; homecoming newpos; } this.max = function(val) { var newpos = new position(this.x, this.y) if(val == null) homecoming newpos; if(!isnan(val.x) && this.x < val.x) newpos.x = val.x; if(!isnan(val.y) && this.y < val.y) newpos.y = val.y; homecoming newpos; } this.bound = function(lower, upper) { var newpos = this.max(lower); homecoming newpos.min(upper); } this.check = function() { var newpos = new position(this.x, this.y); if(isnan(newpos.x)) newpos.x = 0; if(isnan(newpos.y)) newpos.y = 0; homecoming newpos; } this.apply = function(element) { if(typeof(element) == "string") element = document.getelementbyid(element); if(element == null) return; if(!isnan(this.x)) element.style.left = this.x + 'px'; if(!isnan(this.y)) element.style.top = this.y + 'px'; } } function hookevent(element, eventname, callback) { if(typeof(element) == "string") element = document.getelementbyid(element); if(element == null) return; if(element.addeventlistener) { element.addeventlistener(eventname, callback, false); } else if(element.attachevent) element.attachevent("on" + eventname, callback); } function unhookevent(element, eventname, callback) { if(typeof(element) == "string") element = document.getelementbyid(element); if(element == null) return; if(element.removeeventlistener) element.removeeventlistener(eventname, callback, false); else if(element.detachevent) element.detachevent("on" + eventname, callback); } function cancelevent(e) { e = e ? e : window.event; if(e.stoppropagation) e.stoppropagation(); if(e.preventdefault) e.preventdefault(); e.cancelbubble = true; e.cancel = true; e.returnvalue = false; homecoming false; } function getmousepos(eventobj) { eventobj = eventobj ? eventobj : window.event; var pos; if(isnan(eventobj.layerx)) pos = new position(eventobj.offsetx, eventobj.offsety); else pos = new position(eventobj.layerx, eventobj.layery); homecoming correctoffset(pos, pointeroffset, true); } function geteventtarget(e) { e = e ? e : window.event; homecoming e.target ? e.target : e.srcelement; } function absolutecursorpostion(eventobj) { eventobj = eventobj ? eventobj : window.event; if(isnan(window.scrollx)) homecoming new position(eventobj.clientx + document.documentelement.scrollleft + document.body.scrollleft, eventobj.clienty + document.documentelement.scrolltop + document.body.scrolltop); else homecoming new position(eventobj.clientx + window.scrollx, eventobj.clienty + window.scrolly); } function dragobject(element, attachelement, lowerbound, upperbound, startcallback, movecallback, endcallback, attachlater) { if(typeof(element) == "string") element = document.getelementbyid(element); if(element == null) return; var cursorstartpos = null; var elementstartpos = null; var dragging = false; var listening = false; var disposed = false; function dragstart(eventobj) { if(dragging || !listening || disposed) return; dragging = true; if(startcallback != null) startcallback(eventobj, element); cursorstartpos = absolutecursorpostion(eventobj); elementstartpos = new position(parseint(element.style.left), parseint(element.style.top)); elementstartpos = elementstartpos.check(); hookevent(document, "mousemove", draggo); hookevent(document, "mouseup", dragstophook); homecoming cancelevent(eventobj); } function draggo(eventobj) { if(!dragging || disposed) return; var newpos = absolutecursorpostion(eventobj); newpos = newpos.add(elementstartpos).subtract(cursorstartpos); newpos = newpos.bound(lowerbound, upperbound) newpos.apply(element); if(movecallback != null) movecallback(newpos, element); homecoming cancelevent(eventobj); } function dragstophook(eventobj) { dragstop(); homecoming cancelevent(eventobj); } function dragstop() { if(!dragging || disposed) return; unhookevent(document, "mousemove", draggo); unhookevent(document, "mouseup", dragstophook); cursorstartpos = null; elementstartpos = null; if(endcallback != null) endcallback(element); dragging = false; } this.dispose = function() { if(disposed) return; this.stoplistening(true); element = null; attachelement = null lowerbound = null; upperbound = null; startcallback = null; movecallback = null endcallback = null; disposed = true; } this.getlowerbound = function() { homecoming lowerbound; } this.getupperbound = function() { homecoming upperbound; } this.startlistening = function() { if(listening || disposed) return; listening = true; hookevent(attachelement, "mousedown", dragstart); } this.stoplistening = function(stopcurrentdragging) { if(!listening || disposed) return; unhookevent(attachelement, "mousedown", dragstart); listening = false; if(stopcurrentdragging && dragging) dragstop(); } this.isdragging = function(){ homecoming dragging; } this.islistening = function() { homecoming listening; } this.isdisposed = function() { homecoming disposed; } if(typeof(attachelement) == "string") attachelement = document.getelementbyid(attachelement); if(attachelement == null) attachelement = element; if(!attachlater) this.startlistening(); } var el = document.getelementbyid('draggableelement'); var leftedge = el.parentnode.clientwidth - el.clientwidth; var topedge = el.parentnode.clientheight - el.clientheight; var dragobj = new dragobject(el, null, new position(leftedge, topedge), new position(0, 0));

in code, there 2 thing can not solve:

how can move little image when drag , move big image ?

when drag image, mouse should not move out parent div ?

to lock pointer within element can utilize pointer lock api

to move little image, can utilize percentages, calc how much have moved bigger 1 , move little same percentage ammount relative size.

javascript jquery