<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style media="screen" type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
background: red;
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 100px;
}
</style>
</head>
<body>
<div class="box">
111
</div>
<div class="box" style="left:300px;top: 300px">
222
</div>
<div class="box" style="left:500px;top: 10px">
333
</div>
<script>
document.addEventListener("mousedown",drag);
document.addEventListener("mousemove",drag);
document.addEventListener("mouseup",drag);
var flag=false;
var x1,y1,stx,sty,el;
function drag(ev) {
var ev=ev || window.event;
ev.preventDefault();
switch(ev.type){
case "mousedown":
console.log(ev.target.className);
if(ev.target.className==='box'){
flag=true;
el=ev.target;
el.style.cursor="move";
el.style.zIndex='9';
//鼠标点中目标元素时鼠标在页面中的位置
x1=ev.clientX;
y1=ev.clientY;
// console.log('鼠标在页面上的位置'+x1);
//鼠标点中目标元素时元素的位置
// console.log('元素在页面中的横坐标位置'+el.offsetLeft)
stx=x1-el.offsetLeft;
sty=y1-el.offsetTop;
// console.log('鼠标在元素上的位置'+stx);

console.log('鼠标按下');
}

break;
case "mousemove":
if(flag){
x1=ev.clientX;
y1=ev.clientY;
var left,top;
left=x1-stx;
top=y1-sty;

if(left<0){
left=0;
}else if(left>window.innerWidth-el.offsetWidth){
left=window.innerWidth-el.offsetWidth;
}

if(top<0){
top=0;
}else if(top>window.innerHeight-el.offsetHeight){
top=window.innerHeight-el.offsetHeight;
}

el.style.left=left+'px';
el.style.top=top+'px';

}

break;
case "mouseup":
flag=false;
el.style.cursor="inherit";
console.log('鼠标抬起');
document.onmousemove = null;
document.onmouseup = null;
break;
}
}
</script>
</body>
</html>

js 鼠标拖拽元素移动的更多相关文章

  1. js 鼠标拖拽元素

    基础知识 event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event. ...

  2. js鼠标拖拽

    html <div id="box"> </div> css ;;} #box{width:200px;height:200px;background:cy ...

  3. js 鼠标拖拽效果实现

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. 关于js拖拽功能，拖拽元素的position:fixed;left:0;right:0;样式引起左右拖动元素会出现落后鼠标移动距离的问题

    被拖拽元素的样式如果为:position:fixed;left:0;right:0;(当时是为了让fixed定位的元素水平居中加的left:0;right:0;避免js动态计算定位的麻烦)时左右拖动会 ...

  5. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  6. js - 面向对象 - 小案例：轮播图、随机点名、选项卡、鼠标拖拽

    面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...

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

    这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图 ...

  8. juqery 拖拽元素

    转自  http://www.cnblogs.com/holbrook/archive/2012/03/13/2394111.html 因为怕博主删除博客,所以复制过来! JQuery UI是JQue ...

  9. jQuery 鼠标拖拽排序

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. 深入学习 Block

    本文翻译自苹果的文档,有删减,也有添加自己的理解部分. 如果有Block语法不懂的,可以参考fuckingblocksyntax,里面对于Block 为了方便对比,下面的代码我假设是写在ViewCon ...

  2. 从事UNIX/LInux服务器编程最方便的代码编译工具------(eclipse for c/c++)、(FileZilla)、(Secure CRT) 这三种一定要一起使用 之1

    今天主要是将前几天搞的Linux学习的心得写出来,希望帮助更多的人进行,方便从事Unix和Linux编程的同行和刚入门者.主要介绍三种工具并给出安装过程,请大家不必怀疑这个博文,此博文是我自己原创.请 ...

  3. bzoj 1927 [Sdoi2010]星际竞速【最小费用最大流】

    果然还是不会建图- 设\( i \)到\( j \)有通路,代价为\( w[i][j] \),瞬移到i代价为\( a[i] \),瞬移到i代价为\( a[j] \),逗号前是流量. 因为每个点只能经过 ...

  4. bzoj 4184: shallot【线性基+时间线段树】

    学到了线段树新姿势! 先离线读入,根据时间建一棵线段树,每个节点上开一个vector存这个区间内存在的数(使用map来记录每个数出现的一段时间),然后在线段树上dfs,到叶子节点就计算答案. 注意!! ...

  5. python之定时器Timer

    timer类 Timer(定时器)是Thread的派生类,用于在指定时间后调用一个方法. 构造方法: Timer(interval, function, args=[], kwargs={})  in ...

  6. CMake学习笔记一：初识cmake

    1 cmake简介 1.1 背景知识 cmake 是 kitware 公司以及一些开源开发者在开发几个工具套件(VTK)的过程中衍生品,最终形成体系,成为一个独立的开放源代码项目.项目的诞生时间是 2 ...

  7. Tree Recovery POJ - 2255

    Tree Recovery POJ - 2255 根据树的前序遍历和中序遍历还原后序遍历. (偷懒用了stl的find) #include<iostream> #include<st ...

  8. ACM_绝对值

    100块钱都不给我 Time Limit: 2000/1000ms (Java/Others) Problem Description: 今天是广财的ACM周赛,小光来到广财实验楼,想来蹭一下素拓分( ...

  9. 题解报告：hdu 2072 单词数

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2072 题目: Problem Description lily的好朋友xiaoou333最近很空,他想 ...

  10. 【先定一个小目标】dotnet core 命令详解

    本篇博客来了解一下dotnet这个神奇的命令.我会依次对dotnet,dotnet new,dotnet restore,dotnet build,dotnet test,dotnet run,dot ...