comment obtenir l'offset 'droppable'(). Left et offset(). Top sans utiliser jquery, utilisez raw javascript

pour une raison quelconque, je ne peux pas utiliser jquery.comment obtenir l'offset 'droppable'(). Left et offset(). Top sans utiliser jquery, utilisez raw javascript

ceci est mon code:

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body > 
<style type="text/css"> 
#draggable 
     { 
      position: absolute; 
      width: 100px; 
      height: 100px; 
      padding: 0.5em; 
      float: left; 
      margin: 10px; 
      border: 1px solid #DDDDDD; 
      color: #333333; 
      background: #F2F2F2; 
      cursor: move; 
      z-index:10; 
     } 
     #droppable 
     { 
      width: 150px; 
      height: 150px; 
      padding: 0.5em; 
      float: left; 
      margin: 10px; 
      border: 1px solid #E78F08; 
      color: #FFFFFF; 
      font-weight: bold; 
      background: #F6A828; 
      overflow: hidden; 
     } 
</style> 
<p> 
    Eos an invidunt dignissim liberavisse, no paulo alterum vix, mei causae vivendum 
    te. Discere omittam ea sed. Est ex mutat aeque discere. Omnes tincidunt pro ea. 
    Mentitum expetenda reprehendunt vis id, duo natum adhuc ut. Malis partiendo id duo, 
    feugait iudicabit consequuntur at eum. 
</p> 
<div id="droppable"> 
    <p> 
     Drop here. 
    </p> 
</div> 
<p> 
    Ea eam audire antiopam, agam consulatu patrioque no nec. Sea simul insolens ne, 
    vero scribentur duo ut. Te mel dico choro virtute. Mel ex sumo omnes. 
</p> 


<p> 
    Eos an invidunt dignissim liberavisse, no paulo alterum vix, mei causae vivendum 
    te. Discere omittam ea sed. Est ex mutat aeque discere. Omnes tincidunt pro ea. 
    Mentitum expetenda reprehendunt vis id, duo natum adhuc ut. Malis partiendo id duo, 
    feugait iudicabit consequuntur at eum. 
</p> 
<p> 
    Ea eam audire antiopam, agam consulatu patrioque no nec. Sea simul insolens ne, 
    vero scribentur duo ut. Te mel dico choro virtute. Mel ex sumo omnes. 
</p> 
<div id="draggable" > 
    <p>Drag me to my target</p> 
</div> 
<script> 
function id(id){ 
    return document.getElementById(id) 
} 
console.log(id('droppable').offsetWidth,id('droppable').offsetTop) 
id('draggable').style.left =id('droppable').offsetWidth+'px' 
id('draggable').style.top = id('droppable').offsetTop+'px' 

</script> 
</body> 
</html>

c'est la démonstration http://jsfiddle.net/6H5Yj/

donc comment définir la 'égalité de draggable quitté le' de largable gauche, Haut égalité,

grâce

Source

2010-10-04 zjm1126

c'est mootools, pas jQuery ... n'est-ce pas? – Hannes

vous devez écouter des événements comme 'mousemove',' dragstart' et 'dragstop'. - Je ne sais pas comment sans jQuery. Eh bien, jQuery est juste javascript, plongez dans ses codes. – Reigel

jquery est grand .. – zjm1126

var bound = id('droppable').getBoundingClientRect(); 

var x= bound.left,y= bound.top 

id('draggable').style.left =x+'px' 
id('draggable').style.top = y+'px'

Source

2010-10-04 09:52:48 zjm1126

comment obtenir l'offset 'droppable'(). Left et offset(). Top sans utiliser jquery, utilisez raw javascript

Répondre

Questions connexes