Maison > Article > interface Web > code js pour implémenter l'instance div en faisant glisser la souris
code js pour implémenter l'instance div en faisant glisser la souris
- 小云云original
- 2018-02-28 09:40:561622parcourir
Cet article partage principalement avec vous le code js pour implémenter des exemples div de glissement de souris. J'espère qu'il pourra aider tout le monde.
Téléchargez le code directement, simple et pratique.
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title></title> <script type="text/javascript" src='./js/jquery-1.8.3.min.js'></script> <style type="text/css">#ptest{ width: 200px; height: 200px; background: red; position: absolute;/*这很关键*/
left: 40%; top:37%;}#ptest:active{ cursor: move;}</style></head><body><p id="ptest">来，拖拽我啊～</p><script type="text/javascript">var opTest = document.getElementById("ptest");
darg(opTest);function darg(obj){
//鼠标按下
obj.onmousedown = function(ev){
//IE直接用event或者window.event得到事件本身,而在其他浏览器函数要获取到事件本身需要从函数中传入
var oevent = ev || event;
var distanceX = oevent.clientX - this.offsetLeft;
var distanceY = oevent.clientY - this.offsetTop; //鼠标移动
document.onmousemove = function(ev){
var oevent = ev || event;
obj.style.left = oevent.clientX - distanceX + 'px';
obj.style.top = oevent.clientY - distanceY + 'px';
}; //鼠标放开
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
};
}</script></body></html>Recommandations associées :
jQuery utilise l'effet de glisser pour obtenir un glissement libre div_jquery
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Partager des exemples de 5 façons d'implémenter l'héritage dans jsArticle suivant：Partager des exemples de 5 façons d'implémenter l'héritage dans js