javascript 实现拖拽组件

最新推荐文章于 2024-05-17 04:51:24 发布
最新推荐文章于 2024-05-17 04:51:24 发布
阅读量506 收藏 1
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44456354/article/details/111996602
版权

js部分

// Function.prototype 实现
 function Drag(dom) {
     this.dom = document.getElementById(dom);
     this.disX = 0;
     this.disY = 0;
 }
 Drag.prototype.init = function () {
     this.bindEvent();
 }
 Drag.prototype.bindEvent = function() {
     this.mouseDown();
     this.mouseUp();
 }
 Drag.prototype.mouseDown = function() {
     var that = this;
     that.dom.onmousedown = function(e) {
         var e = e || window.event;
         console.log(1)
         that.disX = e.clientX - that.dom.offsetLeft;
         that.disY = e.clientY - that.dom.offsetTop;
         that.mouseMove();
     }
 }
 Drag.prototype.mouseMove = function() {
     var that = this;
     document.onmousemove = function(e) {
         var e = e || window.event;
         that.dom.style.left = e.clientX - that.disX + "px";
         that.dom.style.top = e.clientY - that.disY + "px";
     }
 }
 Drag.prototype.mouseUp = function() {
     document.onmouseup = function() {
         document.onmousemove = null;
     }
 }
 var drag = new Drag("box1");    
 // var drag2 = new Drag("box2");
 extend(ChildDrag.prototype,Drag.prototype)
 
 function ChildDrag(dom) {
     Drag.call(this,dom);
 }
 drag.init();
 var childDrag = new ChildDrag("box2");
 childDrag.init();
 // drag2.init(); 
  
 // object 实现
 // var drag = {
 //     init : function(opt) {
 //         this.settings = {
 //             toDown : function() {},
 //             toUp : function() {}
 //         }
 //         extend(this.settings,opt)
 //         this.dom = document.getElementById(this.settings.id);
 //         console.log(this.dom)
 //         this.disX = 0;
 //         this.disY = 0;
         
 //         this.bindEvent();
 //     },
 //     bindEvent : function() {
 //         this.mouseDown();
 //         this.mouseUp();
 //     },
 //     mouseDown : function() {
 //         var that = this;
 //         that.dom.onmousedown = function(e) {
 //             var e = e || window.event;
 //             that.disX = e.clientX - that.dom.offsetLeft;
 //             that.disY = e.clientY - that.dom.offsetTop;
 //             that.mouseMove();
 //             that.settings.toDown();
 //         }

 //     },
 //     mouseMove : function() {
 //         var that = this;
 //         document.onmousemove = function(e) {
 //         that.dom.style.left = e.clientX - that.disX + "px";
 //             that.dom.style.top = e.clientY - that.disY + "px";
 //         }

 //     },
 //     mouseUp : function() {
 //         var that = this;
 //         document.onmouseup = function() {
 //             document.onmousemove = null;
 //             that.settings.toUp();
 //         }
 //     }
 // }
 // drag.init({
 //     id : "box1",
 //     toDown : function() {
 //         document.title = "down"
 //     },
 //     toUp : function() {
 //         document.title = "up"
 //     }
 // });

 function extend(obj1,obj2) {
     for(var prop in obj2) {
         obj1[prop] = obj2[prop];
     }
 }

html、css部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box1 {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: #d00;
        }
        #box2 {
            position: absolute;
            top: 0;
            left: 200px;
            width: 200px;
            height: 200px;
            background-color: #00d;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>
code_xin~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Drag:javascript拖动组件
07-06
"Drag:javascript拖动组件"是一个关于如何使用JavaScript实现拖放功能的专题，主要关注如何创建一个可拖动的组件。下面将详细介绍这个主题及其相关知识点。 首先，`Drag`看起来是一个自定义的JavaScript类或者函数...
Vue第28篇，SortableJS实现拖拽，SortableJS/Sortable拖拽组件，使用详细（在VueJS中使用SortableJS，SortableJS的安装和使用）
weixin_65793170的博客
02-19 6761
⭐SortableJs中文文档http://www.sortablejs.com下面是使用详细，主要分为3步;1、首相需要安装相关依赖：npm install sortablejs --save；2、页面引入使用：import Sortable from "sortablejs";3、获取大盒子属性，然后在初始化的使用需要调用方法； html页面使用； 感觉有用，就一键三连，感谢(●'◡'●)
Web前端最全撸一个vue项目实现拖拽功能_vue dragover，web前端开发如何提高页面性能优化
最新发布
2401_84123150的博客
05-17 733
原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。dataTransfer 对象允许我们在开始拖动元素时设置数据，并在将元素放在拖放区中时访问相同的数据。首先，我们必须设置数据。如你所见例子中有两个列表，我们可以在它们之间顺畅地拖放项目。API 中有八个拖放事件可以用在我们程序中。
js 实现拖拽效果
weixin_44244924的博客
03-31 625
js实现拖拽效果
前端适用的几个拖拉拽插件
weixin_45289656的博客
03-25 4594
Vue 表单生成器(Form Generator)提供21种字段类型，、也可以使用自定义字段进行扩展。生成的模板对Bootstrap友好，并且可以轻松自定义样式。Vue 表单生成器(Form Generator)是一个基于Schema的表单生成器组件，可以基于Schema构建反应式表单。是一款vue3的拖拽插件,基于Sortable.js实现的，你可以用它来拖拽列表、菜单、工作台、选项卡等常见的工作场景。这个上手也挺快的，大部分需求都可以满足。今天分享几个拖拉拽的工具，包括流程图和表单。
js实现拖拽功能
qq_19820589的博客
03-04 337
js实现拖拽功能
JavaScript 实现拖拽效果组件功能(兼容移动端)
01-18
页面元素拖拽是一种非常实用的前端效果，基于元素拖拽可以实现很多不同的功能，增加客户端许多操作的便捷性，大大提高用户体验。日常生活中大家多多少少都见过这种效果，所以就不废话了，直接开干吧。 预期目标 实现...
javascript实现拖拽并替换网页块元素
10-29
除了使用原生JavaScript实现外，也有一些成熟的第三方库可以帮助简化拖拽和放置操作，比如`jquery-ui`中的`draggable`和`droppable`组件。如果项目允许引入外部JavaScript，使用这些库可以大大降低开发的复杂度和...
JavaScript实现拖拽功能
10-15
JavaScript 实现拖拽功能是网页交互中常见的动态效果，它允许用户通过鼠标操作元素在页面上自由移动。本文将深入探讨如何使用纯 JavaScript 实现这一功能，并解析给出的示例代码。 首先，拖拽功能的核心在于监听...
javascript实现的甘特图组件
12-17
**JavaScript实现的甘特图组件详解** 甘特图是一种常用的时间轴表示方法，它通过条形图来显示项目、进度和其他时间相关的系统组件。在软件开发中，甘特图常用于项目管理，帮助团队可视化任务的开始和结束时间，以及...
js实现拖拽移动
骨子里的偏爱
04-19 618
【代码】js实现拖拽移动。
Draggable - 拖放插件
coderidea
10-31 294
     1） SpryMap一个超级轻量级的依赖于 JavaScript 的小组件，能够让 HTML 元素实现类似 Google Maps 中的点击和拖拽效果。 主页: http://candrews.net/blog/2010/10/introducing-sprymap/ 演示地址: http://candrews.net/sandbox/spryMap...
js 拖拽组件sortablejs的简单使用
PrimaryColor
12-17 710
效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box
【实战】1682- 如何实现原生 JS 的拖拽效果
pingan8787
03-19 54
前言: 关于“拖拽”，其实是一个老生常谈的需求了，并且还是一个非常经典的面试题。之前在项目中拖拽的场景都是直接使用轮子，虽然很快就能完成设计需求，但是这个的原理一直都是我十分想去深入了解的一部分。正好在今天的项目中再一次碰到了这个需求，我觉得是时候去探索一下它了。tips: 本文不会使用 Draggable 去实现，而是会采用原生的 JS 鼠标移动，鼠标点击等事件去完成。并且你需要明确知道的一点是...
【组件】前端js拖拽插件 VUE
我是Superman丶的博客
06-09 2362
Vue Draggable - Vue 拖拽组件王者 Vue drag resize - 轻量级，无依赖，可缩放 Vue smooth dnd - 简单动效，上下拖拽排序，涵盖多场景 V-drag - 最简单的可拖拽执行方案 Vue Easy DnD - 简洁快捷，上下拖拽场景适用 Awe dnd - 基于 vue 2.x 拖放排序组件，元素和图片拖拽通用
【JS组件篇】使用拖拽组件 react-beautiful-dnd 实现工作台自定义布局功能
章魚尐芄子的博客
11-09 1915
基于 react-beautiful-dnd 组件 制作工作台页面：模块可根据后端配置动态展示，各模块可根据个人喜好进行拖拽布局，并保存。
JavaScript拖拽API，ondragstart、ondragover、ondragenter、ondrop，使用详细（JavaScript常用原生拖拽API）
weixin_65793170的博客
05-30 4765
JavaScript的拖拽api相必大家都不陌生，今天来分享下元素在拖动时触发的事件，顺便做下记录。
前端10大开源拖拽排序库汇总, 让搭建,更简单
趣谈前端
04-01 4791
❝hi, 大家好, 我是徐小夕,之前和大家分享了很多「低代码可视化」和「前端工程化」相关的话题, 今天继续和大家分享「8」个非常流行的开源「拖拽排序」库以及「2」个非常有价值的「可视化搭建」解决方案.❞1. dragula一款强大且兼容性极好的拖拽排序库, 兼容「IE7+」, 并且支持 「vanilla JavaScript / Angular / React」等框架.「...
jsplumb 实现拖拽组件
04-01
JsPlumb 是一款基于 jQuery 的流程图绘制工具，它能够帮助开发者快速实现拖拽组件的功能。 1. 引入 jsPlumb 库 在 HTML 文件中引入 jsPlumb 库。 ```html <script src="https://cdn.jsdelivr.net/npm/jsplumb@4.2.3/dist/js/jsplumb.min.js"></script> ``` 2. 创建容器 在 HTML 文件中创建一个容器，用于存放拖拽组件。 ```html <div id="container"></div> ``` 3. 初始化 jsPlumb 在 JavaScript 文件中初始化 jsPlumb。 ```javascript jsPlumb.ready(function() { // 初始化 jsPlumb jsPlumb.setContainer($("#container")); }); ``` 4. 创建组件 在 JavaScript 文件中创建一个组件，设置组件的样式和属性。 ```javascript // 创建组件 var component = $("<div>").addClass("component"); component.attr("id", "component-1"); // 设置组件样式 component.css({ width: "100px", height: "100px", backgroundColor: "red", cursor: "move" }); ``` 5. 将组件添加到容器中 将组件添加到容器中。 ```javascript // 将组件添加到容器中 $("#container").append(component); ``` 6. 实现拖拽功能 使用 jsPlumb 提供的 API 实现拖拽功能。 ```javascript // 实现拖拽功能 jsPlumb.draggable(component, { containment: "parent" }); ``` 7. 完整代码 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jsPlumb 实现拖拽组件</title> <style> #container { width: 500px; height: 500px; border: 1px solid #ccc; } .component { position: absolute; } </style> </head> <body> <div id="container"></div> <script src="https://cdn.jsdelivr.net/npm/jsplumb@4.2.3/dist/js/jsplumb.min.js"></script> <script> jsPlumb.ready(function() { // 初始化 jsPlumb jsPlumb.setContainer($("#container")); // 创建组件 var component = $("<div>").addClass("component"); component.attr("id", "component-1"); // 设置组件样式 component.css({ width: "100px", height: "100px", backgroundColor: "red", cursor: "move" }); // 将组件添加到容器中 $("#container").append(component); // 实现拖拽功能 jsPlumb.draggable(component, { containment: "parent" }); }); </script> </body> </html> ``` 以上就是使用 jsPlumb 实现拖拽组件的步骤，通过以上步骤，您可以轻松实现拖拽组件的功能。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值