javascript拖拽效果

最新推荐文章于 2016-06-30 07:27:56 发布

谁牵引了你的泪

最新推荐文章于 2016-06-30 07:27:56 发布

阅读量277

点赞数

分类专栏： javascript 文章标签： javascript拖拽效果

本文链接：https://blog.csdn.net/king_spunch/article/details/51779889

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
   *{
       margin:0;
       padding:0;
   }
   .box{
       width:500px;
       height:500px;
       background-color:#ccc;
       text-align:center;
       position:absolute;

   }
   p{
       font:bold 22px/44px "宋体";
       background-color:#888;
       cursor:move;
       color:#fff;
   }
</style>
<script src="cookie.js"></script>
<script>
   /*
       需求：拖拽
       思路：
           第一步：获取所要操作的节点对象（box、p、hf）
           第二步：
               鼠标按下：（onmousedown）：给p
                   鼠标移动onmousemove: 给document
               鼠标弹起：onmouseup

   */
   //第一步：获取所要操作的节点对象（box、p、hf）
   window.onload = function(){
       var box = document.getElementById("box"); //box
       var p = document.getElementById("p"); //p
       var hf = document.getElementById("hf"); //hf
       var arr = [];
       var currentLeft = 0;
       var currentTop = 0;

       if(getCookie("x")&&getCookie("y")){
           box.style.left = getCookie("x");
           box.style.top = getCookie("y");
       }


       p.onmousedown = function(e){
           var _event = window.event||e;
           //第一次在点击时，获取的当前鼠标相对于p的一个坐标
           var left = _event.offsetX;
           var top = _event.offsetY;
           document.onmousemove = function(e){
               var _event = window.event||e;
               var x = _event.clientX-left;
               var y = _event.clientY-top;
               //{left:x,top:y} {key:value}
               arr.push({left:x,top:y});
               box.style.left = x + "px";
               box.style.top = y + "px";
               currentLeft = x + "px";
               currentTop = y + "px";
           }

           p.onmouseup = function(){
               document.onmousemove = null;
               var date = new Date();
               date.setDate(24);
               setCookie("x",currentLeft,date); //x
               setCookie("y",currentTop,date);
           }

           hf.onclick = function(){
               var termId = setInterval(function(){
                   if(!arr[0]){
                       clearInterval(termId);
                       return;
                   }
                   box.style.left = arr[0].left + "px";
                   box.style.top = arr[0].top + "px";
                   arr.shift();

               },100);
           }
       }
   }
</script>
</head>
<body>
<div class="box" id="box">
   <p id="p">带我走吧，欧巴 (づ￣ 3￣)づ</p>
   <a href="javascript:" id="hf">回放</a>
</div>
</body>
</html>

谁牵引了你的泪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript拖拽效果

Document *{ margin:0; padding:0; } .box{ width:500px; height:500px; background-color:#ccc; text-align:center; position
复制链接

扫一扫