拖拽对象

最新推荐文章于 2024-08-11 18:40:36 发布
最新推荐文章于 2024-08-11 18:40:36 发布
阅读量86 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/mouse2417/p/5570909.html
版权

<!DOCTYPE html>

<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
padding: 0;
margin: 0;
}

.box {
position: absolute;
width: 100px;
height: 100px;
left: 0px;
top: 0px;
cursor: pointer;
border-radius: 5px;
background-color: #FF6E3D;
box-shadow: 5px 5px 15px rgba(42, 56, 123, 0.5);
}

.box1 {
position: absolute;
width: 100px;
height: 100px;
left: 0px;
top: 0px;
cursor: pointer;
border-radius: 50%;
background-color: #FF6E3D;
box-shadow: 5px 5px 15px rgba(42, 56, 123, 0.5);
}
</style>
</head>

<body>
<div class="box" id="box"></div>
<div id="box1" class="box1"></div>
</body>
<script type="text/javascript">
function Drag(option) {
this.obj = option.obj;
this.mouseOffsetX = 0;
this.mouseOffsetY = 0;
this.parentWidth = option.parentWidth;
this.parentHeight = option.parentHeight;
this.init();

}

Drag.prototype = {
init: function() {
var that = this;
this.obj.onmousedown = function(e) {
var e = e || window.event;
that.mouseDown(e);
}
},
mouseDown: function(e) {
var that = this;
this.mouseOffsetX = e.clientX - this.obj.offsetLeft;
this.mouseOffsetY = e.clientY - this.obj.offsetTop;

document.onmousemove = function(e) {
var e = e || window.event;

that.mouseMove(e);
};

document.onmouseup = function() {
that.mouseUp();
}
},
mouseMove: function(e) {
var moveX = e.clientX - this.mouseOffsetX,
moveY = e.clientY - this.mouseOffsetY,
maxX = this.parentWidth - this.obj.offsetWidth,
maxY = this.parentHeight - this.obj.offsetHeight;

moveX = Math.min(maxX, Math.max(0, moveX));
moveY = Math.min(maxY, Math.max(0, moveY));

this.obj.style.left = moveX + 'px';
this.obj.style.top = moveY + 'px';
},
mouseUp: function() {
document.onmousemove = null;
document.onmouseup = null;
}

}

Drag.prototype.init = function() {
var that = this;
this.obj.onmousedown = function(e) {
var e = e || window.event;
that.mouseDown(e);
return false;
};
};


var drag = new Drag({
obj: document.getElementById("box"),
parentWidth: document.documentElement.clientWidth,
parentHeight: document.documentElement.clientHeight
});

var drag = new Drag({
obj: document.getElementById("box1"),
parentWidth: document.documentElement.clientWidth,
parentHeight: document.documentElement.clientHeight
});
</script>

</html>

转载于:https://www.cnblogs.com/mouse2417/p/5570909.html

weixin_30279751
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
资源管理器（C#源码，支持拖拽）
03-07
资源管理器（C#源码，支持拖拽） TreeView和ListView的综合利用 奇猫居-神游天地间：http://www.qimao.cn
最简短的拖动对象代码实例演示
11-30
拖动对象功能是网页交互设计中的一个重要组成部分，它允许用户通过鼠标操作移动页面上的元素，增强用户体验。在本文中，我们将深入探讨一个兼容多种浏览器（包括IE、Firefox、Opera等）的最简短的拖动对象代码实例。...
10、鼠标拖拽对象
大宇的专栏
06-20 428
通过不断更新物体的坐标位置使其追随鼠标指针的位置，就可以实现在canvas元素上拖拽物体。 1、捕捉 mousedown 事件，判断鼠标坐标是否在物体所在的坐标范围内； 2、如果是，则表示鼠标点击在物体上，此时为 canvas 添加 mousemove 事件的处理程序，并在该处理程序内将物体的 x、y 坐标更新为鼠标指针当前的坐标位置； 3、最后，在 mous...
原生面向对象实现拖拽
m0_59993469的博客
12-01 213
一 ，什么是面向对象 1.首先，js面向对象是一种思想； 2.其次，遵循万物皆对象的准则；程序中的关键模块都可以视为对象，对象都是由属性和方法组成，属性可以理解为对象的特征，是静态的，方法可以理解为对象的行为，是动态的；例如，在汽车这个对象中，他的颜色，型号，大小就是他的属性，而行驶则是他的方法； 3.面向对象会使用对象的属性和方法，它不关注内部的细节和过程；同时也会构造对象。 就像我们说的 一般new 出来的 都是面向对象 比如 new Date（）new XMLHttpRequest()等 .
对一个对象的拖拽
changkejia的博客
08-12 78
gef中已经扩展了一个 TemplateTransfer 全名org.eclipse.gef.dnd.TemplateTransfer 可以直接拿来使用。
拖拽对象的封装
weixin_30776863的博客
04-02 64
一般我们实现拖拽对象，都是对单个元素进行封装，但是如果有多个元素都要实现拖拽效果，代码量就会十分庞大，所以我们可以结合面向对象的思想和闭包等知识，封装一个拖拽对象。 基本思路： 1、如何让元素动起来？ 我们通常通过修改元素的left,top,translate来让元素的位置改变。但是由于修改left,top值会引起页面重绘，而translate不会，因此从性能优化方面考虑，一般会选择trans...
html dragover获得拖拽对象,突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
weixin_32236881的博客
06-15 926
拖拽(Drag/Drop)是个非常普遍的功能。你可以抓住一个对象，并且拖动到你想放置的区域。很多javascript都类似实现了相关的功能，例如，jQueryUI的draganddrop组件。在HTML5中，拖拽(draganddrop)成为了标准操作，任何元素都支持。正因为这个功能太普遍了，所有的主流浏览器都支持这个操作。启用拖拽-draggable属性非常简单，只需要将一个元素的拖动属性修改为...
【JavaScript】拖动事件，鼠标拖动元素出现默认样式原因及解决方法，进度条拖动样式，拖动对象dataTransfer对象
这道题我不会做...不会做啊..太难了！！
05-19 9975
在制作进度条的时候，想要制作一个进度条的拖动样式，所以我给他注册了拖动事件drag，然后虽然可以拖拽产生相应的变化但是会出现一个禁止的标志 解决这个问题先要分析一些拖拽事件： 拖动事件 这里说一下拖动事件： 什么是拖放？拖放是一种常见的特性，即抓取对象以后拖到另一个位置。 为了让元素可拖动，需要使用 HTML5 draggable 属性（设置为draggable=true）。（链接和图片默认是可拖动的，不需要 draggable 属性。） 在拖动目标上触发事件 (源元素): dragstart 要被拖拽的
Unity 从UI中拖拽对象放置并拖动效果
04-21
在Unity游戏引擎中，创建一个从用户界面(UI)中拖拽对象并实现平滑放置与拖动的效果是一项常见的交互设计。这个过程涉及到多个关键的技术点，包括UI元素的设置、碰撞检测、C#脚本编写以及物体的动态更新。下面我们将...
写的一段拖动对象的代码
12-08
在JavaScript中，实现拖动对象的功能是一项常见的交互设计任务，特别是在网页开发中。这段代码可能包含了一个简单的拖放（drag and drop）功能的实现。拖放功能允许用户通过鼠标操作来移动页面上的元素，增强用户...
Canvas高级路径操作之拖拽对象的实现
01-19
为了追踪所画内容，诸如画图应用程序、计算机辅助设计系统（computer-aided design system 简称CAD系统）以及游戏等许多应用程序，都会维护一份包含当前显示对象的列表。通常来说，这些应用程序都允许用户对当前显示...
笔记十三 Egret拖拽对象与吸附对象
11-08
1. 首先，为需要拖动的对象添加`touchEnabled`属性，设置为`true`，使其可以响应触摸事件。 2. 在对象上绑定`touchBegin`事件监听器，记录触摸开始时对象的位置。 3. 绑定`touchMove`事件，根据移动的差值更新对象的...
Windows系统中监控文件复制操作的几种方式
guangmingsky的专栏
08-25 4547
1. ICopyHook 作用: 监视文件夹和打印机移动,删除, 重命名, 复制操作. 可以得到源和目标文件名. 可以控制拒绝操作.   缺点: 不能对文件进行控制. 只对Shell文件操作有效, 对原生Api MoveFile, CopyFile之类的操作无效.   用法: 从ICopyHook派生一个COM对象, 重载CopyCallbackA和CopyCallb
Element学习（布局组件、案例操作）（4）
m0_74363339的博客
08-08 383
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
Arco Design for Vue 3 - 快速上手指南与实战技巧
最新发布
qq_42072014的博客
08-11 412
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 409
注释很详细，直接上代码……
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 303
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
【Vue3】图片未加载成功前占位
菜就多练
08-08 323
原生img标签可以通过自定义指令解决< template > < img class = " image_item-img " v-preload = " ' loading' " src = " https://xx " alt = " 加载失败 " /> < script setup > import {reactive } from 'vue' // 自定义图片占位 const vPreload = {
unity脚本拖拽对象
07-17
要在Unity中实现脚本拖拽对象的功能，您可以按照以下步骤进行操作： 1. 创建一个新的C#脚本，命名为"DraggableObject"（或者您可以根据需要自定义名称）。 2. 将脚本附加到您想要拖拽的游戏对象上。 3. 在脚本中添加以下代码： ```csharp using UnityEngine; public class DraggableObject : MonoBehaviour { private bool isDragging = false; private Vector3 offset; void OnMouseDown() { offset = gameObject.transform.position - Camera.main.ScreenToWorldPoint(Input.mousePosition); isDragging = true; } void OnMouseUp() { isDragging = false; } void Update() { if (isDragging) { Vector3 newPosition = new Vector3(Input.mousePosition.x, Input.mousePosition.y, 10.0f); transform.position = Camera.main.ScreenToWorldPoint(newPosition) + offset; } } } ``` 4. 在Unity编辑器中，选择要拖拽的游戏对象，并将DraggableObject脚本拖拽到Inspector面板上的脚本组件区域。 现在，您的游戏对象应该具备拖拽功能。当鼠标在游戏对象上按下时，它将跟随鼠标移动，直到鼠标释放。 请注意，为了使游戏对象能够响应鼠标事件，需要确保游戏对象具有碰撞器组件（例如，Box Collider）并启用，并且所在的层没有被忽略。 希望这能帮助到您实现Unity中脚本拖拽对象的功能！如果您有任何问题，请随时向我提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值