HTML 通过js实现div的拖动效果
最近做项目，碰到一个问题，需要对div实现拖动效果。
在度娘找了很多，要么觉得代码太长，要么就是效果不理想，不过最后还是找到了一个不错的，感谢大神的留贴，方便了我们，就把代码贴下面了：
<!DOCTYPE html>
<html lang="zh"> <head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Qing's Web</title>
<script src="js/jquery-1.11.0.js" type="text/javascript"></script>
<style type="text/css"> .moveBar {
position: absolute;
width: 250px;
height: 300px;
background: #666;
border: solid 1px #000;
margin: 0px;
left:200px;
top:200px;
} #banner {
background: #52CCCC;
cursor: move;
}
</style>
</head> <body > <div class="moveBar">
<div id="banner">按住此处移动当前div</div>
<div class="content">这里是其它内容</div>
</div> <script>
jQuery(document).ready(
function() {
$('#banner').mousedown(
function(event) {
var isMove = true;
var abs_x = event.pageX - $('div.moveBar').offset().left;
var abs_y = event.pageY - $('div.moveBar').offset().top;
$(document).mousemove(function(event) {
if(isMove) {
var obj = $('.moveBar');
obj.css({
'left': event.pageX - abs_x,
'top': event.pageY - abs_y
});
}
}).mouseup(
function() {
isMove = false;
}
);
}
);
}
);
</script>
</body> </html>
这段代码实现了div的拖动效果，但是因为和项目有出入
原因：
项目上的div是有margin属性的，如果直接使用上面的代码，会出现鼠标位置错位，和拖动晃动
解决方法是：
当鼠标光标位置在"#banner"里面是，去除margin属性，并给".moveBar"的left属性和top属性添加margin的大小
详细见下面代码实现
<!DOCTYPE html>
<html lang="zh"> <head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Qing's Web</title>
<script src="js/jquery-1.11.0.js" type="text/javascript"></script>
<style type="text/css"> .moveBar {
position: absolute;
width: 250px;
height: 300px;
background: #666;
border: solid 1px #000;
margin: 50px;
left:200px;
top:200px;
} #banner {
background: #52CCCC;
cursor: move;
}
</style>
</head> <body > <div class="moveBar">
<div id="banner">按住此处移动当前div</div>
<div class="content">这里是其它内容</div>
</div> <script>
jQuery(document).ready(
function() {
$('#banner').mousedown(
function(event) { $(".moveBar").css("margin","0px") var isMove = true;
var abs_x = event.pageX - ($('div.moveBar').offset().left+50);
var abs_y = event.pageY - ($('div.moveBar').offset().top+50);
$(document).mousemove(function(event) {
if(isMove) {
var obj = $('.moveBar');
obj.css({
'left': event.pageX - abs_x,
'top': event.pageY - abs_y
});
}
}).mouseup(
function() {
var obj = $('.moveBar');
//还原样式，并获取
obj.css({
'left': $('div.moveBar').offset().left-50,
'top': $('div.moveBar').offset().top-50
});
$(".moveBar").css("margin-left","50px")
$(".moveBar").css("margin-top","50px") isMove = false;
}
);
}
);
}
);
</script>
</body> </html>
注： 不过还是有点遗憾的 如果这么做的话，会有晃动效果
可以进行一下修改
1.在鼠标进入"#banner"时，就修改margin属性
修改代码如下：
<script>
$("#banner").mouseenter(function(e) {
var obj = $('.moveBar');
obj.css("margin", "0px");
obj.css({
'left': $('div.moveBar').offset().left + 50,
'top': $('div.moveBar').offset().top + 50
});
})
$("#banner").mouseout(function() {
var obj = $('.moveBar');
//还原样式，并获取
obj.css({
'left': $('div.moveBar').offset().left - 50,
'top': $('div.moveBar').offset().top - 50
});
$(".moveBar").css("margin-left", "50px")
$(".moveBar").css("margin-top", "50px")
})
jQuery(document).ready(
function() {
$('#banner').mousedown(
function(event) {
/*$(".moveBar").css("margin","0px")*/
var isMove = true;
var abs_x;
var abs_y;
abs_x = event.pageX - $('div.moveBar').offset().left;
abs_y= event.pageY - $('div.moveBar').offset().top;
$(document).mousemove(function(event) {
if(isMove) {
var obj = $('.moveBar');
obj.css({
'left': event.pageX - abs_x,
'top': event.pageY - abs_y
});
}
}).mouseup(
function() {
isMove = false;
}
);
});
}
);
</script>
希望可以帮上需要的人，毕竟自己也是小白
对于更复杂的程序，我想也是这样的道理吧
HTML 通过js实现div的拖动效果的更多相关文章
- 纯js实现积木（div）拖动效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js：简单的拖动效果
效果演示:https://jsfiddle.net/dwqs/b5ywws9f/embedded/result/ html: <div class="wrap"> &l ...
- js实现div吸顶效果
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> < ...
- js实现一个可以兼容PC端和移动端的div拖动效果
前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...
- jquery div拖动效果示例代码
div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过 复制代码代码如下: <%@ page language=" ...
- js 实现win7任务栏拖动效果
前言 在某个时刻, 我认识了一个朋友. 此人在我的教唆下, 踏上了js的不归路. 前天他问我, Win7任务栏拖动效果怎么实现. 我随口就跟他说, 这简单的一逼. 在我一晚上的折腾之后, 一份潦草的代 ...
- js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果
1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.a ...
- html通过css,js实现div悬浮效果总汇，如原生JS实现滚动到一定位置实现div悬浮
在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...
- Web的鼠标拖动效果
以前写过一个拖动效果的Demo,拖拽元素新位置的计算是放在拖拽元素的mousemove事件中进行的.计算效率差,而且效果不好.所以一直有想怎样才能做出jquery-ui那种顺滑的拖拽效果. 其实顺滑的 ...
随机推荐
- 移动端rem适配
(function(_D) { var _self = {}; _self.resizeEvt = 'orientationchange' in window ? 'orientationchange ...
- 大数据学习笔记5 - Spark
Spark是一个基于内存计算的大数据并行计算框架.所以,Spark并不能完全替代Hadoop,主要用于替代Hadoop中的MapReduce计算模型. 在实际应用中,大数据处理无非是以下几个类型: 复 ...
- 100-days: twenty-nine
Title: The promise and perils of synthetic biology promise n.希望成功的前景 peril n.巨大的危险:险情,险境 释义:the peri ...
- 如何看iOS崩溃日志
重点:Triggered by Thread这句话后边的线程号,快速定位问题出现在那个线程,是否是你的锅:Triggered by Thread所指的线程表示导致异常.崩溃的线程 下边内容转自简书 简 ...
- Solidity-让合约地址 接受ETH的转账充值的 三种方式
以太坊智能合约开发:让合约接受转账 在以太坊智能合约开发中,通常会有向合约地址进行转账的需求,那么有几种向合约地址进行转账的方式呢? 有三种方式: 部署合约时转账 调用合约提供的方法 直接向合约地址进 ...
- Cannot attach medium 'D:\program\VirtualBox\VBoxGuestAdditions.iso' {}: medium is already associated with the current state of machine uuid {}返回 代码: VBOX_E_OBJECT_IN_USE (0x80BB000C)
详细的错误信息如下: Cannot attach medium 'D:\program\VirtualBox\VBoxGuestAdditions.iso' {83b35b10-8fa2-4b81-8 ...
- 分割list，将集合按规定个数分为n个部分。
/** * 按指定大小,分隔集合,将集合按规定个数分为n个部分 * * @param list * @param len * @return */ public static <T> Li ...
- UCloud双11活动 - 新人UCloud代金券最低年100元香港云服务器
UCloud,一家在国内还是比较大的云计算产品提供商,早年一直提供企业服务的,如今也开始落地到个人用户群.这不在希望获得更多的用户基础的同时发布各种促销活动.这次双十一活动时机肯定也是要把握的,据说官 ...
- 关于mysql存储过程中传decimal值会自动四舍五入的这个坑
容我说几句题外话:我的工作日常是用微软系的,SQL SERVICE 存储过程很强大,我也很习惯很喜欢用存储过程.和MySQL结缘,是在五年前,因为一些原因,公司要求用开源免费的数据库.很多时候,用my ...
- 创建Gitblit本地服务器（For windows ）01
1.先下载gitblit 貌似需要FQ,百度云链接https://pan.baidu.com/s/1WUtBswj5TkFFcd_hiFFCcw,提取码: xr9n .因为gitblit是基于jav ...