JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例

本文实例讲述了JS实现鼠标拖拽盒子移动及右键点击盒子消失效果。分享给大家供大家参考，具体如下：

1. 鼠标拖拽盒子移动效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    div{
      width: 100px;
      height: 100px;
      background: blue;
      position: absolute;
    }
  </style>
</head>
<body>
<div>
</div>
<script>
  window.onload=function () {
    var oDiv=document.getElementsByTagName("div")[0];
    oDiv.onmousedown=function () {
      document.onmousemove=function (ev) {
        var event=window.event||ev;
        oDiv.style.left=event.clientX+"px";
        oDiv.style.top=event.clientY+"px";
      }
      document.onmouseup=function (){
        document.onmousemove=null;
        document.onmouseup=null;
      }
    }
  }
</script>
</body>
</html>

2. 鼠标右键使盒子消失

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 100px;
      height: 100px;
      background: red;
      display: block;
    }
  </style>
</head>
<body>
<div>
</div>
<script>
  window.onload=function () {
    document.oncontextmenu=function () {
      var oDiv=document.getElementsByTagName("div")[0];
      oDiv.style.display="none"
      return false
    }
  }
</script>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试一下运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • js实现使用鼠标拖拽切换图片的方法

    本文实例讲述了js实现使用鼠标拖拽切换图片的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css"> *{margin:0;padding:0;} .m-slider{width:600px;margin:0 auto 10px !importan

  • JS HTML5实现拖拽移动列表效果

    JS HTML5实现拖拽移动列表效果

    练习HTML5中的拖放API,实现列表拖拽移动!参考文章:JS HTML5拖拽上传图片预览 HTML5拖拽移动列表实现思路:  1.循环设置每个子项的draggable属性,以及设置拖动标记(不会多个或全部子项都移动)  2.每次进入投放区,则检测时候有拖放标记,有则添加dom元素,以此类推 另一种实现思路是:可以利用拖放中DataTransfer对象作为属性,用setData()和getData()方法传递每个拖动的子项的id等数据,找到指定的子项进行移动-.待实验... HTML: //空列

  • JS拖拽的进一步练习，移动与拉伸实现代码

    直接在本地是支持IE6的,有个问题就是,鼠标点击的时候光标会变为选择文字的光标,不知道应该怎么处理这个问题呢? 在此记录一下代码: 简单拖拽扩展 *{margin:0;padding:0;} #outwarp{ margin:20px auto; width:600px; height:600px; background:#fff; border:1px solid #333; position: relative; } .controlBox{ width:200px; height:200p

  • JavaScript实现拖拽元素对齐到网格（每次移动固定距离）

    JavaScript实现拖拽元素对齐到网格（每次移动固定距离）

    这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图,可以看到,每次元素的移动都是按照最小单位距离移动的.且每次元素都是对齐到网格的. 先根据demo说明一下思路和细节,后面会给出demo代码. 1. 确定元素的每次移动的最小单位(demo中为10px和10px),也就是每次水平或垂直的位移量都是10px.铺上一层网格背景是为了帮助我们更好的看到效果

  • 超酷的鼠标拖拽翻页(分页)效果实现javascript代码

    拖动分页 body{ border:0px; margin:0px; overflow:hidden; background-color:transparent; font-family:宋体; } .page{ position:absolute; width:700px; border:1px solid #999; background-color:#000; left:425px; margin-left:-350px; cursor:default; z-index:0; } ul{

  • JS鼠标拖拽实例分析

    JS鼠标拖拽实例分析

    本文实例讲述了JS鼠标拖拽实现方法.分享给大家供大家参考,具体如下: JS代码: <script> window.onload=function() { var oDiv=document.getElementById('div'); var disX=0; var disY=0; oDiv.onmousedown=function(ev) //鼠标按下DIV { var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLeft; //鼠标的X

  • javascript简单拖拽实现代码(鼠标事件 mousedown mousemove mouseup)

    mousedown 的时候创建拖动对象,mouseup的时候释放对象,原理弄清楚了其实很简单. 简单拖拽实现代码: 简单拖拽实现 *{margin:0;padding:0;} #box{ margin:20px auto; position:relative; width:400px; height:400px; background:#ccc; border:1px solid #333; postion:relative; } #dragBox{ width:50px; height:50p

  • JS实现移动端触屏拖拽功能

    JS实现移动端触屏拖拽功能

    1.html <div id="div1"></div> 2.css * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } #div1 { width: 50px; height: 50px; background: cyan; position: absolute; } 3.js var div1 = document.querySelector('#div1'); //限

  • javascript实现移动端上的触屏拖拽功能

    javascript实现移动端上的触屏拖拽功能

    本文是分享了javascript实现移动端上的触屏拖拽功能,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initi

  • 使用javaScript实现鼠标拖拽事件

    本文实例为大家分享了js实现鼠标拖拽事件的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; padding: 0; } div{ position: absolute; top: 200px;/*div的y轴*/ left: 150px;/*div的x轴*/ width: 3

  • 鼠标拖拽移动子窗体的JS实现

    鼠标拖拽移动子窗体的JS实现

    1.子窗体 在设计网站的时候,我们需要设计一些模态的子窗体,比如 这一步很容易实现,只需要div+css就ok了,请看代码: 复制代码 代码如下: <div class="modal-background"></div>    <div class="modal-window">        <div class="head">            <center>点住着块区域可以改

随机推荐