js 拖拽效果

<style type="text/css">
* {
margin: 0;
padding: 0;
}

#mbox {
width: 600px;
height: 500px;
margin: 20px auto 0;
background-color: #000;
border: 1px solid burlywood;
position: relative;
}

#xbox {
width: 40px;
height: 40px;
position: absolute;
top: 40px;
left: 40px;
background-color: red;
}
</style>

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

<body>
<div id="mbox">
<div id="xbox">

</div>
</div>

<script type="text/javascript">
var xbox = document.querySelector("#xbox");
var mbox = document.querySelector("#mbox");
var mstrX = xbox.getBoundingClientRect().left;
var mstrY = xbox.getBoundingClientRect().top;
xbox.onmousedown = function(e) {
//获取事件源，并解决兼容问题。
var ev = e || window.event;
//获取鼠标点击处DIV盒子距离。
var astrX = ev.offsetX;
var astrY = ev.offsetY;

document.onmousemove = function(e) {
var ev = e || window.event;
var lft = ev.clientX - astrX - mstrX;
var tp = ev.clientY - astrY - mstrY;
//禁止移除边框 并实现弹性吸附效果。

//禁止移除横向边框
if(lft < 50) {
lft = 0;
} else if(lft > (mbox.offsetWidth - xbox.offsetWidth)-50) {
lft = mbox.offsetWidth - xbox.offsetWidth;
}

//禁止移除纵向边框
if(tp < 50) {
tp = 0;
} else if(tp > (mbox.offsetHeight - xbox.offsetHeight)-50) {
tp = mbox.offsetHeight - xbox.offsetHeight;
}
xbox.style.left = lft + "px";
xbox.style.top = tp + "px";
// console.log(astrX);
}
//抬起鼠标并清除拖拽。
document.onmouseup = function() {
document.onmousemove = null;

}

//去除冒泡
return false;
};
</script>
</body>

原文地址：https://www.cnblogs.com/xuyx/p/10638481.html

时间： 2024-10-03 14:24:56

js 拖拽效果的相关文章

js拖拽效果实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta

React.js实现原生js拖拽效果及思考

一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖拽效果. 首先,其实拖拽效果的思路是很简单的.主要就是三个步骤: 1.onmousedown的时候,启动可拖拽事件,记录被拖拽元素的原始坐标参数. 2.onmousemove的时候,实时记录鼠标移动的距离,结合被拖拽元素第一阶段的坐标参数,计算并设置新的坐标值. 3.onmouseup的时候,关闭可拖拽事件

js拖拽效果的原理及实现

js中元素的拖拽效果需要用到的主要的知识点为:事件侦听和鼠标事件.即被拖拽的元素添加事件侦听,侦听的事件主要为mousedown,mousemove和mouseup,一些情况下还需要用到mouseleave.本篇所针对的原理是存在多个相同元素情况下的拖拽.下面结合案例进行分析.1.首先在body中创建7个div元素,并设置css样式. <style> div{ width:50px; height: 50px; background-color: red; position: absolute

js拖拽效果的原理和实现

让我们了解一下最简单的拖拽效果: 1.首先我们先设置一个div,然后简单设置一下样式: div{ width:50px; height: 50px; background-color: red; position: absolute; } 2.然后我们编写js部分,我们要清楚,元素的拖拽分三个部分:鼠标左键按下.拖动鼠标元素跟着移动.以及鼠标左键抬起停止拖拽元素停止移动 var div = document.querySelector("div");                 

再谈React.js实现原生js拖拽效果

前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目地就是要尽量避免直接操作dom元素,所以我们在对dom元素进行操作的时候需要注意,我之前为了获取form的参数就直接用了var dragBox=document.getElementById('form')去找dom,但是其实记录from的初始位置,可以在其子组件更新父组件参数的时候调用.即在MyF

js拖拽效果的实现

1.最基础的写法 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 {width:200px; height:200px; background:yellow; position:absolute;} 8 </style> 9 <sc

js拖拽效果

先创建一个div <script> //获取这个div var div=document.querySelector("div"); / 按下时开始监听在文档中鼠标移动的事件 // 开始监听鼠标松开键的事件 // 只有按下时才准备拖拽 div.onmousedown=function(e1){ // 当鼠标在文档移动时,不能再div上移动,因为鼠标可能离开div,造成无法拖拽 document.onmousemove=function(e){ // 当鼠标移动时,将当前鼠标

JS拖拽效果，代码精干，通俗易懂！

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ margin-top: 10px; width: 200px; height: 150px; background: #dadada; position: absolute; cursor:move; } </style> <

原生js拖拽效果

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title><style>   *{      margin:0;      padding:0;    }   #box{    width:100px;    height:100px;    background: red;