div的拖拽练习

学完js基础后,一直在找一些题目在练习。下面是div模块的拖拽例子,废话不多说,直接上代码:

<html>

<head>

<title>拖拽</title>
<style type="text/css">
#box {

width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>

</head>
<body>
<div id="box"></div>
<script type="text/javascript">
window.onload = drag;

function drag(){
var boxElement = document.getElementById("box");
boxElement.onmousedown = function(){
event = event || window.event;
down(event, box);
}
}

//鼠标按下时,获取光标相对于div的位置。
function down(e, el){
disX = event.clientX - el.offsetLeft;
disY = event.clientY - el.offsetTop;
el.onmousemove = function(){
event = event || window.event;
move(event, disX, disY);
}

//取消鼠标事件的绑定
el.onmouseup = function(){
el.onmousemove = null;
el.onmouseup = null;
}

}

//div根据光标的位置进行移动
function move(event, posX, posY){
var boxElement = document.getElementById("box");
var l = event.clientX - posX;
var t = event.clientY - posY;
var winW = document.documentElement.clientWidth || document.body.clientWidth;
var winH = document.documentElement.clientHeight || document.body.clientHeight;
console.log(winW + " "+ winH);
var maxW = winW - boxElement.offsetWidth;
var maxH = winH - boxElement.offsetHeight;
if(l < 0){
l = 0;
}else if(l > maxW){
l = maxW;
}
if(t < 0){
t = 0;
}else if(t > maxH){
t = maxH;
}

boxElement.style.left = l + ‘px‘;
boxElement.style.top = t + ‘px‘;
}
</script>
</body>
</html>

时间: 2024-10-11 18:26:39

div的拖拽练习的相关文章

jQuery实现div横向拖拽排序

参考:https://blog.csdn.net/kongjiea/article/details/45578033 效果图: html <h1>div横向拖拽排序</h1> <div class="box"> <div class="horizontal-div" id="div1">div1</div> <div class="horizontal-div"

jquery实现对div的拖拽功能

<!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"> <head> <meta http-equiv="Content-

jquery 实现div边界拖拽控制大小

html <div id="container"> <!-- Left side --> <div id="left"> This is the left side's content! </div> <!-- Right side --> <div id="right"> <!-- Actual resize handle --> <div id=&quo

js实现可拖拽的div

实现一个div可以被拖拽,代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>zzw_drap</title> <style> * { margin: 0; padding: 0; } #box { position: absolute; top: 100px; left: 200

纯js实现DIV拖拽

写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但发现这段代码使用前必须设置top和left样式属性,否则拖动时div会有跳动,而且不支持多个div的拖动.于是对代码大概修改了一番,贴在这里,以备后用,希望大神勿怪. var startDrag = function(bar, target, callback) { (function(bar, target

理解事件捕获。在限制范围内拖拽div+吸附+事件捕获

一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二.一步步的实现这个拖拽过程的几个要求 (一)拖拽起来 里面的边框是表示页面哦(我们的屏幕所能看到的东东). 获取移动距离的思路: 记录鼠标按下和鼠标抬起两次的坐标,然后相减,再加上div跟边缘之间的间距.就得到移动距离. 之前我也在这里困惑了,不明白为什么还要再加上offsetLeft.原因就是cl

拖拽调整Div大小

今天写了一天这个jquery插件: 可以实现对div进行拖拽来调整大小的功能. 1 (function ($) { 2 $.fn.dragDivResize = function () { 3 var deltaX, deltaY, _startX, _startY; 4 var resizeW, resizeH; 5 var size = 20; 6 var minSize = 10; 7 var scroll = getScrollOffsets(); 8 var _this = this;

js 利用jquery.gridly.js实现拖拽并且排序

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src='javascripts/jquery.js' type='text/javascript'></script> <script src='javascripts/jqu

HTML5拖拽——将本地文件拖拽到网页中显示

HTML5标准中的提供的用于文件输入输出(I/O)的对象 File: 代表一个文件对象 FileList: 代表一个文件列表,类数组对象 FileReader 用于从文件中提取内容 FileWrite 用于向文件中写入类容 这些对象需要在 H5的拖拽事件中通过 e.dataTransfer 来访问和获取 完成效果如下: Data URL给了我们一种很巧妙的将图片"嵌入"到HTML中的方法.跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换