拖动的div

最新推荐文章于 2022-04-24 17:47:21 发布
最新推荐文章于 2022-04-24 17:47:21 发布
阅读量78 收藏
点赞数
文章标签： PHP .net HTML 


<head><title></title>
<style>
body 
{
font-size:12px;
color:#333333;
border : 0px solid blue;
}
div
{
position : absolute;
background-color : #c3d9ff;
margin : 0px;
padding : 5px;
border : 0px;
width : 100px;
height:100px;
}
</style>
</head>
<body>
<script>
function drag(o,s)
{
if (typeof o == "string") o = document.getElementById(o);
o.orig_x = parseInt(o.style.left) - document.body.scrollLeft;
o.orig_y = parseInt(o.style.top) - document.body.scrollTop;
o.orig_index = o.style.zIndex;

o.onmousedown = function(a)
{
  this.style.cursor = "move";
  this.style.zIndex = 10000;
  var d=document;
  if(!a)a=window.event;
  var x = a.clientX+d.body.scrollLeft-o.offsetLeft;
  var y = a.clientY+d.body.scrollTop-o.offsetTop;

  d.ondragstart = "return false;"
  d.onselectstart = "return false;"
  d.onselect = "document.selection.empty();"

  if(o.setCapture)
   o.setCapture();
  else if(window.captureEvents)
   window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
  d.onmousemove = function(a)
  {
   if(!a)a=window.event;
   o.style.left = a.clientX+document.body.scrollLeft-x;
   o.style.top = a.clientY+document.body.scrollTop-y;
   o.orig_x = parseInt(o.style.left) - document.body.scrollLeft;
   o.orig_y = parseInt(o.style.top) - document.body.scrollTop;
  }
  d.onmouseup = function()
  {
   if(o.releaseCapture)
    o.releaseCapture();
   else if(window.captureEvents)
    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
   d.onmousemove = null;
   d.onmouseup = null;
   d.ondragstart = null;
   d.onselectstart = null;
   d.onselect = null;
   o.style.cursor = "normal";
   o.style.zIndex = o.orig_index;
  }
}

if (s)
{
  var orig_scroll = window.onscroll?window.onscroll:function (){};
  window.onscroll = function ()
  {
   orig_scroll();
   o.style.left = o.orig_x + document.body.scrollLeft;
   o.style.top = o.orig_y + document.body.scrollTop;
  }
}
}
</script>
<div id="div1" style="left:10px;top:10px;">div1:拖吧，往死里拖</div>
<div id="div2" style="left:120px;top:10px;background-color : #f3d9ff">div2:来拖我呀</div>
<div id="div3" style="left:230px;top:10px;background-color : #c3ffff">div3:随你怎么拖</div>
<div id="div4" style="left:10px;top:120px;background-color : #c3d944">div4:我可以随窗口滑动，把我拖到最下面，然后滚动网页看看</div>
<div id="div5" style="left:120px;top:120px;background-color : #f3d944">php同盟会<br/><a href=http://www.dophp.net target=_blank>www.dophp.net</a>
</div>
<div id="div6" style="left:230px;top:120px;background-color : #e3f944;width:200px;">参数说明:<br/>
drag(obj [,scroll]);<br/>
obj:对象的id或对象本身;<br/>
scroll(可选):对象是否随窗口拖动而滑动，默认为否<br/>
鼠标右键查看源代码
</div>

<script>
drag("div1");
drag("div2");
drag("div3");
drag("div4",1);
drag("div5",1);
drag("div6",1);

</script>
</body>
yimeng501
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现div的拖拽
weixin_50337713的博客
03-30 7544
拖拽：在div上按下鼠标，移动鼠标，移动过程中让div跟随鼠标移动 分析： 给div绑定鼠标按下事件 - 在按下的事件中继续绑定移动事件 div移动：设置left和top - 给div设置定位 left 和 top 的值是多少？ 获取鼠标的位置 ，就是 left 和 top left 和 top =鼠标在浏览器中位置 减去 一开始鼠标是div上的位置 <style> .box{ width: 100px; height: 100px;
js拖拽div随意摆放
11-07
js拖拽div随意摆放 js拖拽div随意摆放 js拖拽div随意摆放
可拖动的DIV
weixin_34346099的博客
08-29 126
在做WEB UI设计的时候，拖动某个HTML元素已经成为一种不能忽视的用户界面模式，比较典型的应用例子就是Dialog，一个元素是怎么实现拖动的呢？其实原理非常简单，要想实现首先得了解几个基本知识。 Tips 绝对定位：只有把元素的position属性设置为absolute并且或者fixed才可以实现拖动，默认情况下元素会按文档流中的位置自行决定其出现在页面上的位置，是不能移动的，而绝对定位的...
div的拖动
温壁
10-12 931
在实现div的拖动之前，首现要认识三个主要的事件 onmousedown鼠标按下的时候（不能松开） onmousemove鼠标指针在屏幕上移动的时候（抚摸事件） onmouseup鼠标松开的时候 知道这些事件之后，我们首先搭建好一个div <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&...
div拖动
雩风季白的博客
04-24 428
有个缺点；鼠标移动过快，会导致拖动失灵 var callCenterDiv = document.querySelector('#callCenterDiv') callCenterDiv.onmousedown = function (e) { // 记录鼠标到盒子边缘的距离，这个距离在整个拖拽过程中是固定不变的 var disX = e.offsetX, disY = e.offsetY // 只要鼠标在box上按下了，在整个文档里移动都会触发拖
可以拖动的div
RSHUEN的博客
04-18 440
可以拖动的div <!DOCTYPE html> <html> <head runat="server"> <title></title> <style> #mov{ background-color: #00DDCC; width: 200px; he...
jQuery拖拽div实现思路
10-26
本文将详细介绍如何使用jQuery实现div元素的拖拽功能，主要涉及`mousedown`、`mousemove`和`mouseup`这三个事件。 首先，我们需要理解这些事件的作用： 1. `mousedown`：当鼠标按钮被按下时触发，通常用于开始一个...
可拖动div边框改变大小的方法
11-21
可拖动div边框改变大小的方法,jquery拖拽改变div大小效果，。。。。。。。。。。。。。。。。。。。。。。。。。
判断可拖动div是否重合 重合多少
09-05
判断可拖动div是否重合的优化方法 在判断可拖动div是否重合时，效率较低是因为 div 元素的绝对定位和重叠覆盖所导致的计算复杂度增加。以下是优化方法： 1. 使用 boundingClientRect 方法：可以使用 ...
html 拖动div进行相应顺序的排序，亲测可用，简单方便
07-14
1、html 拖动div进行相应顺序的排序，亲测可用，简单方便 2、适用于各大场景，通过相应的js拖动来执行相应的方法 3、可以下载应用，不懂的可以一起探讨
div 拖动 拖动层
10-30
div 拖动 div 拖动 div 拖动 div 拖动 div 拖动 div 拖动
js 鼠标拖动div
weixin_43294560的博客
11-27 458
div中心跟踪鼠标动而动 得到鼠标坐标，移动时div的左上距离为鼠标两坐标减去div左上顶点到中心的距离 div任意位置随鼠标动而动 得到鼠标第一次坐标，移动时div的左上距离就为div每次移动前最开始的左上距离加上鼠标移动中的坐标减去鼠标第一次坐标，即任意位置移动是移动过程相对于第一次的位移 <html> <head> <meta charset="utf-8...
js实现div拖拽
xcj888it的博客
05-10 1272
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;tuozhuai&lt;/title&gt; &lt;style&gt; *{ margin:
JS+DIV 实现拖动
乐夫天命兮的博客
05-13 3144
效果如下： 源码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div{ width:300px; height:400px; background:url(i...
实现div鼠标拖动效果
王凯琦的博客
09-11 2110
实现这个效果的关键是给div的定位设置成absolute,然后获得鼠标移动后的位置坐标并给要移动的div。  我将它封装成了一个函数，只需要传入参数即可使用。  downDiv:鼠标按下部分的id；  moveDiv:跟随鼠标移动的div的id;  代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta...
拖拽div移动的两种方法
qq_43155489的博客
08-27 3821
jQuery UI - 拖动（Draggable） 在任意的 DOM 元素上启用 draggable 功能。通过鼠标点击并在视区中拖动来移动 draggable 对象。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body...
可拖动DIV层的实现方法
热门推荐
2byte
06-15 1万+
可拖动DIV层的实现方法这几天做了一个英文单词搜索的谷歌扩展，其中的划词搜索功能会产生一个可托拖动的DIV层来作为结果显示，为了做一个较为完善的拖动层，花费了很长时间进行设计与调试。在此把心得总结了一下，讲讲实现方法与关键点。先来看看效果：在线实例DEMO基本思路 有一个DIV层，设定position属性为absolute或fixed，通过更改其left，top来更改层的相对位置。 在DIV层上绑定
实现div拖拽的几种方式
Hiqingtian的博客
03-23 9836
&lt;%@page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;jQuery拖放&lt;/title&gt; &lt;scri
div上下拖拽（resize）
渐变强的小刘
04-21 2806
实现拖拽的方式有很多种，css实现可能不是最好的实现方式，仅供参考。 话不多说，先上图 需求介绍：主要实现的是 中间区域（红框）内可以托住上下拖动. 功能实现所需： resize: css3新增属性，放在div上即可使其可以拖拽，详见:resize介绍文档(https://www.w3school.com.cn/cssref/pr_resize.asp) cursor:ns-resize，上下拖拽鼠标图标.详见：[cursor属性](https://developer.mozilla.org/zh.
vuedraggable拖拽div
最新发布
03-12
下面是使用vuedraggable拖拽div的简单介绍： 1. 首先，你需要在你的Vue项目中安装vuedraggable。可以通过npm或者yarn进行安装： ``` npm install vuedraggable ``` 2. 在你的Vue组件中引入vuedraggable： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值