javascript - draggable without jQuery ui -

-

how make element draggable without using jquery ui?

i have code:

<script type="text/javascript">     function show_coords(event)     {         var x=event.clientx;         var y=event.clienty;         var drag=document.getelementbyid('drag');         drag.style.left=x;         drag.style.top=y     } </script>  <body style="height:100%;width:100%" onmousemove="show_coords(event)">      <p id="drag" style="position:absolute">drag me</p> </body>

the problem want drag while user pressing mouse button. tried onmousedown results negative.

it quite easy concept.

function enabledragging(ele) {     var dragging = dragging || false,        //setup bunch of variables         x, y, ox, oy,         enabledragging.z = enabledragging.z || 1,         current;     ele.onmousedown = function(ev) {         //when mouse down         current = ev.target;         dragging = true;                     //it dragging time         x = ev.clientx;                      //get mouse x , y , store         y = ev.clienty;                      // later use.         ox = current.offsetleft;             //get element's position         oy = current.offsettop;         current.style.zindex = ++enabledragging.z;  //z-index thing          window.onmousemove = function(ev) {             if (dragging == true) {                //when dragging                 var sx = ev.clientx - x + ox,      //add difference between                     sy = ev.clienty - y + oy;      // 2 mouse position                 current.style.top = sy + "px";     // element.                 current.style.left = sx + "px";                 return false;                      //don't care this.             }         };         window.onmouseup = function(ev) {             dragging && (dragging = false);        //mouse up, dragging done!         }     }; }  enabledragging(document.getelementbyid("drag"));  //draggable now!  var ele = document.getelementsbytagname("div"); for(var = 0; < ele.length; i++){              //every div's draggable     enabledragging(ele[i]);                       // (only when "position" }                                                 //  set "absolute" or                                                   //  "relative")

http://jsfiddle.net/derekl/nwu9g/

the reason why code not working because <div> follow cursor goes, , not dragging it. top left corner follow cursor, , not wanted.

update

now if want grabber or similar, change part of script:

ele.onmousedown = function(ev) {     current = ev.target;

to 

var grabber = document.createelement("div"); grabber.setattribute("class", "grabber"); ele.appendchild(grabber); grabber.onmousedown = function(ev) {     current = ev.target.parentnode;

now can click on grabber start dragging process.

http://jsfiddle.net/derekl/nwu9g/7/


Comments

Post a Comment

Popular posts from this blog

django - How can I change user group without delete record -

-
on website user have 1 group. , user can change group. it's made user.groups.clear() and user.groups.add(new_group) but it's not efficient, because there 2 sql query: delete, insert. how can change group update query? user , group related each other using manytomanyfield . means intersection table exists relating both entities, , if don't specify model map (using through attribute) django creates 1 you. looking @ sources django.contrib.auth.models see that's case. fortunatly, can access intermediary model using through attribute of manager (in case, user.groups.through ). can use regular model. example: >>> alice = user.objects.create_user('alice', 'alice@example.com', 'alicepw') >>> employee = group.objects.create(name='employee') >>> manager = group.objects.create(name='manager') >>> alice.groups.add(employee) >>> alice.groups.all() [<group: employee...
Read more

java - Need to add SOAP security token -

-
i need set custom soap header attribute on jax-ws generated webservice client. case webservice calls must go through proxy server requiring specific token (recieved web request header) present in soap request header. e.g.: 1 carserviceservice service = null; 2 service = new carserviceservice(new url(url), new qname(qname); 3 carserviceendpoint port = service.getcarserviceport(); it seems in line 3 wsdl retrieved , call fails due missing security token. 1 point direction on how done? a detailed example has been mentioned here: creating , deploying jax-ws web service on tomcat 6 this article shows how create , use security token .
Read more

java - EclipseLink JPA Object is not a known entity type -

-
i have strange problem eclipselink , object want persist. have 1 object (keypointlistimpl) stores object keypointimpl in list. persisting keypointimpl objects works great if try persist keypointlistimpl object java.lang.illegalargumentexception says object keypointimpl isn't known entity type. here keypointimpl code: @entity @table(name="keypoints") public class keypointimpl implements keypoint { @id @generatedvalue(strategy = generationtype.identity) private int id; @enumerated(enumtype.string) private detectortype keypointtype; private float x; private float y; private float size; private float angle; private float response; private int octave; private int classid; ... } here keypointlistimpl code: @entity @table(name="keypointlists") public class keypointlistimpl implements keypointlist { @id @generatedvalue(strategy = generationtype.identity) private int id; @onetoone(cascade={ca...
Read more