随意拖动

最新推荐文章于 2024-03-13 14:33:18 发布
最新推荐文章于 2024-03-13 14:33:18 发布
阅读量482 收藏
点赞数
分类专栏： javascript 文章标签： function html border class javascript table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/colincrazy/article/details/1659880
版权

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>随意拖动</title>
</head>
<style>
.dragAble {position:relative;cursor:move;}

</style>
<body>
<script language="javascript">
setInterval("refresh();",5000);
function refresh(){
 document.getElementById('doProgressDivID').style.display="";
}
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var y,x;
var oDragObj;

function moveMouse(e) {
 if (isdrag) {
 oDragObj.style.top  =  (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";
 oDragObj.style.left  =  (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";
 return false;
 }
}

function initDrag(e) {
 var oDragHandle = nn6 ? e.target : event.srcElement;
 var topElement = "HTML";
 while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {
 oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
 }
 if (oDragHandle.className=="dragAble") {
 isdrag = true;
 oDragObj = oDragHandle;
 nTY = parseInt(oDragObj.style.top+0);
 y = nn6 ? e.clientY : event.clientY;
 nTX = parseInt(oDragObj.style.left+0);
 x = nn6 ? e.clientX : event.clientX;
 document.οnmοusemοve=moveMouse;
 return false;
 }
}
document.οnmοusedοwn=initDrag;
document.οnmοuseup=new Function("isdrag=false");
function doClose(){
 document.getElementById('doProgressDivID').style.display='none';
}
</script>
<div class="dragAble" id="doProgressDivID" style="position:absolute;height:150;width:360; left:258px; top:300px; z-index:1;display:none;">
<table border="1" width="100%" height="100%" cellspacing="0" cellpadding="4" style="border-collapse: collapse;border:1px solid #A1A1A1;" bgcolor="#FFFFEC">
 <tr height=8>
  <td height="27" background="../images/5.gif" class="line1">&nbsp;&nbsp;
  <span class="blue" ><strong>&nbsp;信息管理</strong></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <SPAN  title=关闭 style='FONT-WEIGHT: bold; FONT-SIZE: 12px; CURSOR: hand; COLOR: red; MARGIN-RIGHT: 4px' onClick="doClose();">×</SPAN>
  </td>
 </tr>
 <tr>
   <td valign="top" >
     <table id="messageTable"  bordercolor="#66CC99" width="100%" cellspacing="1" border="1" cellpadding="0">
     <tr><td>&nbsp;</td></tr>
     </table>
   </td>
 </tr>
</table>
</div>
</body>
</html>

colincrazy
关注
专栏目录
html设置边框可以随意拖动,如何达到这种随意拖拽的效果？
weixin_34588509的博客
06-23 1753
演示：体验地址：workmates.me效果1：在网页上随意拖拽。效果2：鼠标经过时的描边。效果3：在图片之间连线。效果1. 随意拖拽。树型解释：1.每当鼠标移动时，记录下是否【单击】了某一张图片：否：什么也不做是：记录下图片的id；记录下鼠标当下的坐标{x:event.pageX,y:event.pageY} ；设置first_click为True1.1. 在first_click为True的情...
html 可以拖动的div,多个div实现随意拖拽功能
weixin_42342626的博客
06-10 2513
鼠标事件mousedownmousemovemouseup注意事项:被拖动的div的position属性值一定是absolute。切记不可使用margin-top:10px;而应该使用top:10px;onmousedown事件需要在window.onload时加载。如果被拖动的div上有文字会有自带的文字拖动效果，需要将改div上的所有拖动事件绑定在该div上，可以使用setCapture。代码...
随意拖动的小方块特效
管子（zero）的杂乱空间
11-25 1442
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--><script type="text/javascript"src="
android 随意拖动按钮,Android实现随意拖动View效果
weixin_30701661的博客
05-26 225
项目过程中要实现能在页面中随意的拖动，刚开始实现是用悬浮球的形式进行实现，因为之前项目中用过，实现后发现用户每次安装后，都有权限的限制，甚至有些用户关闭悬浮球权限之后，不知道怎么在手机上打开悬浮球的权限，这样的话用户体验很不好，所以自己重新自定义实现在页面中拖动，不需要请求权限。自定义随意拖动View：package com.dragdemo;import android.annotation.S...
Android 自定义随意拖拽布局
一只程序菜鸡的博客
01-27 2295
效果图如下： 1. 自定义view如下： package com.example.myapplication import android.content.Context import android.util.AttributeSet import android.view.MotionEvent import android.widget.RelativeLayout import kotlin.math.abs class CustomDragView @JvmOverloads constru
移动端悬浮按钮+可随意拖动
@liz的笔记空间
04-19 1182
欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片
uniapp 悬浮球【随意拖拽】
weixin_46174785的博客
03-18 3886
先看效果 代码具体实现逻辑 <template> <view class="hover_ball_cell" :style="{ width: `${diameter}px`, height: `${diameter}px`, top: `${top}px`, left: `${left}px` }" @touchmove="touchmove" @touchend="touchend" @touchcancel="touchcancel" @tap="onTa
html图片随意拖动怎么实现,HTML 实现随意拖动内容位置
weixin_29798981的博客
06-04 2144
HTML 实现随意拖动内容位置2020-09-01 07:19:43两种方式为：拖拽普通标签位置或拖拽canvas中的文本框位置1. 实现鼠标拖动标签元素到任意位置css 代码#range{position:relative;width:600px;height:400px;margin:10px;background-color:rgb(133,246,250);}.icon{...
设置div随意拖动
qq_41353397的博客
03-28 566
/** ********设置div随意拖动 start ******* */ var dragging = false; var iX, iY; $("#divID").mousedown(function(e) { dragging = true; iX = e.clientX - this.offsetLeft; iY = e.clientY - this.offsetTop; this.setCapture && this.setCapture();
vue实现一个可以随意拖拽的悬浮按钮组件
最新发布
m0_58571759的博客
03-13 755
【代码】实现一个可以随意拖拽的悬浮按钮组件。
VUE实现可随意拖动的弹窗组件
10-17
在Vue.js中实现一个可随意拖动的弹窗组件，主要涉及到事件监听、CSS样式以及组件的状态管理。这个组件主要用于解决在PC端使用时，没有现成的可拖动弹窗功能的问题。以下是对实现该功能的关键知识点的详细说明： 1. ...
js网页中随意拖动的小方块实现代码
10-30
"JS网页中随意拖动的小方块实现代码" 本文主要讲解如何使用JavaScript和CSS在网页中实现一个随意拖动的小方块。下面是详细的实现步骤和相关知识点： HTML结构 首先，我们需要在HTML中添加一个div元素，用于承载...
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
11-23
本文讲解了如何采用PHP+MySQL+jQuery，实现随意拖动层并即时保存拖动位置。 本文原理就是通过拖动将拖动后层的相对位置left,top和z-index三个参数更新到数据表中对应的记录，页面通过CSS解析每个层不同的位置。请看...
Android实现随意拖动View效果的实例代码
08-25
Android实现随意拖动View效果的实例代码 Android实现随意拖动View效果是Android开发中的一种常见需求，本文将通过实例代码详细介绍Android实现随意拖动View效果的方法。 一、基本概念 在Android中，View是所有...
JS HashTable
colincrazy的专栏
06-30 1958
"http://www.w3.org/TR/html4/loose.dtd">JS HashTablefunction Hashtable(){ this._hash = new Object(); this.add = function(key,value){  if(typeof(key)!="undefined"){   if(this.contains(key)==false){    t
禁用图片
colincrazy的专栏
06-20 822
"http://www.w3.org/TR/html4/loose.dtd">禁用图片function fnToggle(oObj) {if (oDiv.filters(0).enabled){oDiv.filters(0).enabled=false;oObj.innerText=Make Embossed;}else {oDiv.filters(0).enabled=true;
checkbox 判断同一行的值是否相同
colincrazy的专栏
04-24 760
function doChoiceModfiyLadingItem(index,sorderid,ssalecorpname,ivalidity,swarehouse){  chku   =   eval("document.all.sorderid"+index+".innerText")+eval("document.all.swarehouse"+index+".innerText");  
js倒记时程序
colincrazy的专栏
06-14 760
    var   urodz=   new   Date("11/8/2003");     var   s="今天离五一劳动节";     var   now   =   new   Date();     var   ile   =   urodz.getTime()   -   now.getTime();     var   dni   =   Math.floor(ile   /  
子页面关闭，刷新父页面
colincrazy的专栏
04-24 561
 javascript:window.close()(window.opener.location.reload())
unity2d中随意拖拽图片
06-08
在Unity2D中随意拖拽图片，可以通过以下步骤实现： 1. 在Unity编辑器中创建一个新的2D场景。 2. 将需要拖拽的图片导入到项目资源中。 3. 在场景中创建一个空的GameObject，将该对象命名为“Draggable”。 4. 在“Draggable”对象上添加一个Box Collider 2D组件，并将其大小调整为图片的大小。 5. 添加一个Sprite Renderer组件，并将图片拖拽到该组件的Sprite属性中。 6. 添加一个脚本组件，例如“DraggableObject”，并将其挂载到“Draggable”对象上。 7. 在“DraggableObject”脚本中实现OnMouseDown、OnMouseDrag和OnMouseUp等方法。 8. 在OnMouseDown方法中，记录鼠标点击位置与对象中心点的距离。 9. 在OnMouseDrag方法中，计算鼠标移动的距离，并将“Draggable”对象的位置设置为鼠标位置减去鼠标点击位置与对象中心点的距离。 10. 在OnMouseUp方法中，将“Draggable”对象的位置设置为最终位置。 这样就完成了在Unity2D中随意拖拽图片的实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值