js实现元素的clone与拖动

最新推荐文章于 2024-06-25 20:23:09 发布
最新推荐文章于 2024-06-25 20:23:09 发布
阅读量2.7k 收藏 4
点赞数 2
分类专栏： javascript vue.js css 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ltmtianming/article/details/80787585
版权
vue.js 同时被 3 个专栏收录
8 篇文章 0 订阅
订阅专栏
javascript
6 篇文章 1 订阅
订阅专栏
css
2 篇文章 0 订阅
订阅专栏

js实现元素的clone与拖动有时候还是会遇到的，以下是示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="textml; charset=utf-8" />
    <title>Clone</title>
    <style type="text/css">
        body,div{margin:0;padding:0;}
        body{background:#222;}
        div{position:absolute;width:100px;height:100px;cursor:move;border:1px solid #888;background:#000;}
        #d1{top:50px;left:50px;font-size: 20px;color: #fff;}
        #d2{top:200px;left:50px;font-size: 20px;color: #fff;}
        #d3{top:350px;left:50px;font-size: 20px;color: #fff;}
    </style>
</head>
<body>
<div id="d1">1</div>
<div id="d2">2</div>
<div id="d3">3</div>
</body>
<script type="text/javascript">
    window.onload = function ()
    {
        var d1 = document.getElementById("d1");
        var d2 = document.getElementById("d2");
        var d3 = document.getElementById("d3");
        cloneMove(d1);
        cloneMove(d2);
        cloneMove(d3);
    };
    function cloneMove(cloneMoves)
    {
        var disX =0;
        var disY = 0;
        cloneMoves.onmousedown = function (event)
        {
            var event = event || window.event;
            disX = event.clientX - this.offsetLeft;
            disY = event.clientY - this.offsetTop;
            var cloneTemp = cloneMoves.cloneNode(true);
            cloneTemp.style.left = this.currentStyle ? this.currentStyle["left"] : getComputedStyle(this, null)["left"];
            cloneTemp.style.top = this.currentStyle ? this.currentStyle["top"] : getComputedStyle(this, null)["top"];
            document.body.appendChild(cloneTemp);


            document.onmousemove = function (event)
            {
                var event = event || window.event;
                var iL = event.clientX - disX;
                var iT = event.clientY - disY;
                var maxL = document.documentElement.clientWidth - cloneMoves.offsetWidth;
                var maxT = document.documentElement.clientHeight - cloneMoves.offsetHeight;
                iL <= 0 && (iL = 0);
                iT <= 0 && (iT = 0);
                iL >= maxL && (iL = maxL);
                iT >= maxT && (iT = maxT);
                cloneTemp.style.left = iL + "px";
                cloneTemp.style.top = iT + "px";
                return false;
            };
            document.onmouseup = function ()
            {
                document.onmousemove = null;
                document.onmouseup = null;
            };
            this.setCapture && this.setCapture();
            return false
        }
    }
</script>
<html>

君子-如兰
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 20
    评论
专栏目录
JS | 元素拖动
liuj4 | 自娱自乐
09-04 503
确定需要的事件 1. 点击事件: 点击待拖动元素触发，记录下当前鼠标相对于元素的位置dis_x和dis_y，这个距离在拖动的时候是不变的！ 2 . 移动事件：在1中点击事件的基础上，加上鼠标的移动事件，每次移动就先获取鼠标当前相对浏览器的位置cur_x和cur_y，那么元素的当前位置为： 鼠标相对于浏览器的位置 - 鼠标相对于元素的位置 = （cur_x - dis_x，cur_x -...
JS 实现div元素的拖动
烂笔头NI
08-13 1106
JS 实现div元素的拖动功能描述： 在浏览器窗口有一个div盒子，用鼠标点击盒子，按下进行拖动，当鼠标弹起时，该div就移动到此位置了。实现代码：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ marg
JS实现拖拽功能
weixin_30918415的博客
08-11 121
本文代码地址（第一节）：https://github.com/dirstart/js-exam/blob/master/%E6%8B%96%E6%8B%BDdiv1.html 第二节：https://github.com/dirstart/js-exam/blob/master/%E6%8B%96%E6%8B%BDdiv2.html 第三节：https://github.com/di...
js中的克隆
TXW6666的博客
09-13 658
在js中克隆被分为深度克隆和浅克隆 克隆的概念 深克隆 所有元素或属性完全复制，与原对象完全脱离，也就是说所有对新对象的修改都不会映射到原对象中 浅克隆 原始类型为值传递，对象类型仍为引用传递，所以改变新对象中的引用值会改变原对象中 var lilei = { sname: 'Li Lei', sage: 12, cars: [1, 2, 3], inrt() { console
Javascript：克隆一个DOM节点
最新发布
听海边涛声
06-25 262
Javascript：克隆一个DOM节点
js dom 方法 js中cloneNode()的使用（复制元素）
龙卷风之家
01-08 7371
js dom 方法 js中cloneNode()的使用（复制元素）   document方法：   getElementById(id)  Node  返回指定结点的引用   getElementsByTagName(name)  NodeList  返回文档中所有匹配的元素的集合   createElement(name)  Node  Node   creat
js DOM节点操作之创建、添加、删除和克隆节点
RayShyy的博客
03-21 4361
1. 创建节点 document.createElement(“tagName”)：tagName为HTML标签名，创建一个标签名为tagName的元素节点。 <body> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> </body> <script>
Javascript 克隆
hslStudy的专栏
02-02 254
newElement oldElement.cloneNode(bool deep); 这个方法只有一个参数，布尔值，如果为true，则克隆oldElement这个及其子节点，否则只克隆这个节点本身。返回值就是一个克隆的newElement节点。 在JQuery中，clone（）方法生成被选元素的副本，包含子节点，文本及属性。
jquery实现两个div中的元素相互拖动的方法分析
10-15
代码实现中，`draggable()`方法配置了`helper: "clone"`，这意味着在拖动过程中会创建一个元素的克隆，而不是移动原始元素。当元素被拖放到目标`<div>`上时，`droppable()`方法的`drop`回调函数被触发。这个回调函数...
JS实现网页Div层Clone拖拽效果
11-25
当用户按下鼠标时，计算鼠标与Div元素的初始偏移量，并创建一个临时的Clone Div，其初始位置与被拖动元素相同，同时设置其层级高于原元素。接下来，监听`onmousemove`事件，根据鼠标移动的位置更新Clone Div的位置，...
easyui Draggable组件实现拖动效果
09-03
- **deltaX** 和 **deltaY**: 控制拖动元素与鼠标之间的相对偏移，即拖动时元素与鼠标位置的预设距离。 - **handle**: 指定拖动的触发点，可以是一个选择器，确保只有特定的部分可以启动拖动。 - **disabled**: ...
javascript克隆元素样式的实现代码
11-30
代码如下: /** * 克隆元素样式 * @param {HTMLElement} 被克隆的元素 * @param {Boolean} 是否启用缓存（默认true） * @return {String} css类名 */ var cloneStyle = (function (doc) { var rstyle = /^(number|string)$/, cloneName = ‘${cloneName}’, sData = {}, addHeadStyle = function (content) { var style = sData[doc]; if (!style) { style
jquery实现商品拖动选择效果代码(自写)
10-27
1. `helper: "clone"`：这表示在拖动时创建一个商品元素的克隆，原始元素仍然留在原地，防止在拖动过程中影响页面布局。 2. `cursor: "move"`：设置鼠标光标在拖动时显示为移动图标，给用户视觉反馈。 3. `appendTo:...
jQuery实现表格列表拖动排序特效源码.zip
11-07
helper: "clone", // 创建拖动时的辅助元素，这里使用克隆原元素 opacity: 0.5, // 拖动时的透明度 }); ``` 3. **定义可放置区域**：对于表格的列（`<td>`），使用`droppable`方法来定义可以接受拖放元素的区域...
Raphael.js API之Element.clone(),Element.data(),Element.dblclick()
Jinx
06-18 854
/*API-10/ Element.clone() 返回值：给定元素的克隆对象 /*API-11*/ Element.data(key,value) 为给定key值添加值 参数列表： key     字符串类型     存储绑定数据的关键字 value     可选参数     任意类型     为key绑定的值或事件 返回值：元素对象 or 如果没有没有给valu
JavaScript_element.cloneNode()函数的使用；
cenyebao的专栏
02-21 2052
测试页面                      function dosomething() {                 // element.cloneNode()函数的使用；                 var spanelement = document.getElementById("wife");                 var textnode = s
DOM之元素的 创建+添加+删除+克隆
weixin_47075145的博客
07-18 2596
方式2利用innerHTML创建元素（不推荐用）innerHTML属性值不运行时，当作字符串，运行时当作js代码。
js实现深度克隆函数clone(）
吴冬雪的博客
05-12 2022
今天聊一下clone这个前端面试高频问题，由此引出typeof、instanceof、Object.prototype.toString这些javascript Api。js对象之间的赋值，如果直接用"="会发现来两个对象还是同一个对象，改变其中一个另外的一个也会做出对应的改变。 建议先学一下js 数据类型判断 -> 参考https://blog.csdn.net/qq_37548296/article/details/105440198 ======================= ...
JavaScript之element的各种操作
HNUYSY的博客
06-29 609
先给出一个表格 <table width="500px" align="center" border="1px"> <thead id="th"> <tr> <th>th1</th> <th>th2</th> <th>th3</th>
vue3 draggable中的clone怎么实现
04-30
在 Vue3 Draggable 中，当你拖动一个元素时，可以通过设置 `clone` 属性来克隆该元素。具体实现如下： 1. 在你的组件中添加一个 `draggable` 的元素，并设置 `clone` 属性为 `true`。 ```html <draggable v-model="list" :clone="true"> <div v-for="(item, index) in list" :key="index"> {{ item }} </div> </draggable> ``` 2. 在你的 `draggable` 组件中使用 `createElement` 函数创建一个新的元素来代替被拖动的元素。 ```js import { defineComponent, h } from 'vue' import Draggable from 'vuedraggable' export default defineComponent({ components: { Draggable }, setup() { return { list: ['Item 1', 'Item 2', 'Item 3'] } }, render() { return h(Draggable, { modelValue: this.list, 'onUpdate:modelValue': (val) => { this.list = val }, clone: true, item: 'div', 'data-id': 'id' }, this.list.map((item, index) => { return h('div', { key: index, 'data-id': index }, item) })) } }) ``` 在这个例子中，我们使用了 `createElement` 函数来创建一个 `div` 元素，并为其设置 `key` 和 `data-id` 属性。这样，被拖动的元素就会被克隆并替换成新创建的元素。
评论 20
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值