支持IE,firefxo,chrome浏览器下鼠标拖动和拖拽的鼠标指针特效

首页

web前端

js教程

支持IE,firefxo,chrome浏览器下鼠标拖动和拖拽的鼠标指针特效_布局与层

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:16 PM

拖拽鼠标拖动

核心代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标拖动和拖拽的鼠标指针特效</title>
<style>
#box{width:100px;height:100px;background:#966;position:absolute;left:100px;top:100px;cursor:pointer;}
</style>
</head>
<body>
<div id="box"></div>
<script>
var doc=document;
function getViewport(){
  return {width:Math.max(document.documentElement.clientWidth,document.documentElement.scrollWidth),
      height:Math.max(document.documentElement.clientHeight,document.documentElement.scrollHeight)
  };
}
function compareNum(x,minNum,maxNum){
 switch(true){
 case x<minNum:x=minNum;break;
 case x>maxNum:x=maxNum;break;
 default:x;
 }
 return x;
 }
 
box.style.left='100px'
box.style.top='100px'
 
box.onmousedown=function(e){
 var e=e||window.event;
 var maxL=getViewport().width-100,
   maxT=getViewport().height-100;
 this.startL=parseInt(this.style.left);
 this.startT=parseInt(this.style.top);
 //alert(e.clientX)
 this.startX=e.clientX;
 this.startY=e.clientY;
 //alert(maxL+':'+maxT+':'+L+':'+T)
 doc.onmousemove=function(e){
 posXY(e,0,0,maxL,maxT);
 };
 doc.onmouseup=function(){
  doc.onmousemove=null;
 doc.onmouseup=null;
 };
 return false;
}
function posXY(e,minL,minT,maxL,maxT){
  var e=e||window.event;
 var x=box.startL-(box.startX-e.clientX);
 var y=box.startT-(box.startY-e.clientY);
 box.style.left=compareNum(x,minL,maxL)+'px'
 box.style.top=compareNum(y,minT,maxT)+'px'
}
</script>
</body>
</html>

登录后复制

<title>鼠标拖动和拖拽的鼠标指针特效</title>

<style>

#box{width:100px;height:100px;background:#966;position:absolute;left:100px;top:100px;cursor:pointer;}

</style>

var doc=document;

function getViewport(){

return {width:Math.max(document.documentElement.clientWidth,document.documentElement.scrollWidth),

height:Math.max(document.documentElement.clientHeight,document.documentElement.scrollHeight)

};

}

function compareNum(x,minNum,maxNum){

switch(true){

case x<minNum:x=minNum;break;

case x>maxNum:x=maxNum;break;

default:x;

}

return x;

}

box.style.left='100px'

box.style.top='100px'

box.onmousedown=function(e){

var e=e||window.event;

var maxL=getViewport().width-100,

maxT=getViewport().height-100;

this.startL=parseInt(this.style.left);

this.startT=parseInt(this.style.top);

//alert(e.clientX)

this.startX=e.clientX;

this.startY=e.clientY;

//alert(maxL+':'+maxT+':'+L+':'+T)

doc.onmousemove=function(e){

posXY(e,0,0,maxL,maxT);

};

doc.onmouseup=function(){

doc.onmousemove=null;

doc.onmouseup=null;

};

return false;

}

function posXY(e,minL,minT,maxL,maxT){

var e=e||window.event;

var x=box.startL-(box.startX-e.clientX);

var y=box.startT-(box.startY-e.clientY);

box.style.left=compareNum(x,minL,maxL)+'px'

box.style.top=compareNum(y,minT,maxT)+'px'

}

</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7467

CakePHP 教程

1376

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

如何使用 JavaScript 实现图片的拖拽缩放功能？ Oct 27, 2023 am 09:39 AM

如何使用JavaScript实现图片的拖拽缩放功能？在现代web开发中，实现图片的拖拽和缩放是常见的需求。通过使用JavaScript，我们可以轻松地为图片添加拖拽和缩放功能，提供更好的用户体验。在本篇文章中，将介绍如何使用JavaScript来实现这一功能，以及附有具体的代码示例。HTML结构首先，我们需要一个基本的HTML结构来展示图片，并为图片添

Vue 中实现拖拽选中及放置的技巧及最佳实践 Jun 25, 2023 am 10:13 AM

Vue是一款流行的JavaScript框架，适合用于构建单页面应用(SPA)。其支持通过指令和组件等方式实现拖拽选中及放置的功能，为用户提供了更好的交互体验。本文将介绍在Vue中实现拖拽选中及放置的技巧及最佳实践。拖拽指令Vue提供了一个v-draggable指令，可以轻松地实现拖拽效果。该指令可以被应用于任何元素上，并且可以自定义拖拽的样

如何使用Vue实现拖拽排序特效 Sep 20, 2023 pm 03:01 PM

如何使用Vue实现拖拽排序特效Vue.js是一款流行的JavaScript框架，它能够帮助我们构建交互性强的前端应用程序。在Vue中，我们可以很容易地实现拖拽排序特效，让用户可以通过拖动元素的方式进行数据排序。本文将介绍如何使用Vue实现拖拽排序特效，并提供具体的代码示例。首先，我们需要创建一个Vue的实例，并定义一个数组来存储要排序的数据。在示例中，我们将

Vue实战技巧：使用v-on指令处理鼠标拖拽事件 Sep 15, 2023 am 08:24 AM

Vue实战技巧：使用v-on指令处理鼠标拖拽事件前言：Vue.js是一个流行的JavaScript框架，它的简洁易用和灵活性使得它成为了众多开发者的首选。在Vue应用开发中，处理用户交互事件是必不可少的一项技能。本文将介绍如何使用Vue的v-on指令来处理鼠标拖拽事件，并提供具体的代码示例。创建Vue实例：首先，在HTML文件中引入Vue.js的库文件：&

Vue 中如何实现拖拽元素的复制和移动？ Jun 25, 2023 am 08:35 AM

Vue是一款流行的JavaScript框架，它提供了方便的拖拽功能，让我们可以轻易地实现元素的复制和移动。下面，我们就来看一下如何在Vue中实现拖拽元素的复制和移动。一、拖拽元素的基本实现在Vue中实现拖拽元素的复制和移动，首先需要实现元素的基本拖拽功能。具体实现方法如下：在模板中添加需要拖拽的元素：

如何使用 JavaScript 实现拖拽改变元素大小的功能？ Oct 21, 2023 am 11:34 AM

如何使用JavaScript实现拖拽改变元素大小的功能？随着Web技术的发展，越来越多的网页需要具有拖拽改变元素大小的功能。例如，可以拖拽改变一个div元素的大小来调整它的宽度和高度。本文将介绍如何使用JavaScript实现这一功能，并提供具体的代码示例。在开始之前，我们需要了解一些基本的概念：元素的位置和大小属性：在CSS中，通过t

如何在uniapp中实现拖拽排序功能 Jul 06, 2023 pm 12:31 PM

如何在uniapp中实现拖拽排序功能拖拽排序是一种常见的用户交互方式，可以让用户通过拖动元素的方式改变元素的顺序。在uniapp中，我们可以通过使用组件库和一些基本的拖拽事件来实现拖拽排序功能。下面将详细介绍如何在uniapp中实现拖拽排序功能，并附带代码示例。步骤一：创建基本的列表页面首先，我们需要创建一个基本的列表页面，用来展示需要排序的元素。可以使用&

JavaScript 如何实现鼠标拖动画线功能？ Oct 19, 2023 am 11:51 AM

JavaScript如何实现鼠标拖动画线功能？摘要：鼠标拖动画线功能在许多项目中都十分常见，可以用于创建交互式图表、绘制草图等。本文将介绍如何使用JavaScript实现鼠标拖动画线功能，并提供具体的代码示例，帮助读者更好地理解和应用。引言：在Web开发中，常常需要实现一些交互性强的效果，而鼠标拖动画线功能便是其中一种常见的需求。通过鼠标拖动，我们

See all articles

支持IE,firefxo,chrome浏览器下鼠标拖动和拖拽的鼠标指针特效_布局与层

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题