Web Front-end
JS Tutorial
Support mouse dragging and dragging mouse pointer effects in IE, firefxo, and chrome browsers_Layout and Layers
Support mouse dragging and dragging mouse pointer effects in IE, firefxo, and chrome browsers_Layout and Layers
Core code:
<!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>[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to use JavaScript to implement the drag and zoom function of images?
Oct 27, 2023 am 09:39 AM
How to use JavaScript to implement the drag and zoom function of images? In modern web development, dragging and zooming images is a common requirement. By using JavaScript, we can easily add dragging and zooming functions to images to provide a better user experience. In this article, we will introduce how to use JavaScript to implement this function, with specific code examples. HTML structure First, we need a basic HTML structure to display pictures and add
Tips and best practices for drag-and-drop selection and placement in Vue
Jun 25, 2023 am 10:13 AM
Vue is a popular JavaScript framework suitable for building single page applications (SPA). It supports drag-and-drop selection and placement functions through instructions and components, providing users with a better interactive experience. This article will introduce the techniques and best practices for drag-and-drop selection and placement in Vue. Drag Instruction Vue provides a v-draggable instruction that can easily achieve drag effects. This command can be applied to any element, and the drag style can be customized.
How to use Vue to implement drag-and-drop sorting effects
Sep 20, 2023 pm 03:01 PM
How to use Vue to implement drag-and-drop sorting effects Vue.js is a popular JavaScript framework that can help us build highly interactive front-end applications. In Vue, we can easily implement drag-and-drop sorting effects, allowing users to sort data by dragging elements. This article will introduce how to use Vue to implement drag-and-drop sorting effects, and provide specific code examples. First, we need to create an instance of Vue and define an array to store the data to be sorted. In the example we will
How to copy and move drag-and-drop elements in Vue?
Jun 25, 2023 am 08:35 AM
Vue is a popular JavaScript framework that provides a convenient drag-and-drop function, allowing us to easily copy and move elements. Next, let's take a look at how to copy and move drag-and-drop elements in Vue. 1. Basic implementation of drag-and-drop elements To copy and move drag-and-drop elements in Vue, you first need to implement the basic drag-and-drop function of the element. The specific implementation method is as follows: Add the elements that need to be dragged in the template: <divclass="drag-elem"
Vue practical skills: use the v-on instruction to handle mouse drag events
Sep 15, 2023 am 08:24 AM
Vue practical skills: Use the v-on instruction to handle mouse drag events Preface: Vue.js is a popular JavaScript framework. Its simplicity, ease of use and flexibility make it the first choice for many developers. In Vue application development, handling user interaction events is an essential skill. This article will introduce how to use Vue's v-on directive to handle mouse drag events and provide specific code examples. Create a Vue instance: First, introduce the Vue.js library file in the HTML file: &
How to use JavaScript to implement the function of dragging and dropping to change the size of elements?
Oct 21, 2023 am 11:34 AM
How to use JavaScript to implement the function of dragging and dropping to change the size of elements? With the development of Web technology, more and more web pages need to have the function of dragging and dropping to change the size of elements. For example, you can drag and resize a div element to adjust its width and height. This article will introduce how to use JavaScript to achieve this function and provide specific code examples. Before we start, we need to understand some basic concepts: the position and size properties of elements: in CSS, through t
How to implement drag and drop sorting function in uniapp
Jul 06, 2023 pm 12:31 PM
How to implement drag-and-drop sorting function in uniapp Drag-and-drop sorting is a common user interaction method that allows users to change the order of elements by dragging them. In uniapp, we can implement the drag and drop sorting function by using the component library and some basic drag events. The following will introduce in detail how to implement the drag and drop sorting function in uniapp, with code examples. Step 1: Create a basic list page First, we need to create a basic list page to display the elements that need to be sorted. can use&
How to use Vue to implement hook drag effects
Sep 19, 2023 pm 02:11 PM
How to use Vue to implement hook drag effects Introduction: In modern web design, drag and drop effects have become very common. It can improve user experience and increase interactivity. As a popular JavaScript framework, Vue provides many convenient tools and libraries to easily implement drag-and-drop effects. This article will introduce how to use Vue to implement hook drag effects and provide specific code examples. 1. Preparation work Before using Vue to implement the hook drag effect, we need to prepare the following work: Install the Vue framework. Can
