html界面元素拖拽实现［超简单］

alin 发布于2019-08-02 15:54 / 2248人阅读

摘要：就是一个十分简单的小功能，将一个界面元素从一个地方拖到另一个地方复制或移动部分省略部分非关键代码被拖拽元素属性，表明元素可拖拽股拖拽目标区域拖拽部分即监听部分存储拖拽元素的注意和的写法略有不同禁止冒泡获取被拖拽元素的根据获

就是一个十分简单的小功能，将一个html界面元素从一个地方拖到另一个地方（复制或移动）

html部分,省略部分非关键代码



  A股

拖拽js部分, 即监听部分

$("#ma").bind("dragstart", function (event) {
    const ev = event.originalEvent
    // 存储拖拽元素的id
    ev.dataTransfer.setData("targetId", ev.target.id)
  })

// 注意jquery和js的写法略有不同
$("#box").bind("drop", function (event) {
    // 禁止冒泡
    event.stopPropagation()
    const ev = event.originalEvent
    // 获取被拖拽元素的id
    const id = ev.dataTransfer.getData("targetId")
    // 根据id获取该元素或clone该元素
    const node = $("#${id}").clone(true)  // clone方法相关参数参见附图
    // const node = document.getElementById(id).cloneNode(true)
    // node.id = ...
    node.attr("id", "newid")
    ev.target.appendChild(node)
    .....
  })

clone方法附图

界面效果

酱酱，完啦！撒花，撒花！

GPU云服务器云服务器简单游戏html界面 html5实现拖拽移动 html实现弹框界面元素拖拽

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54312.html

task0002（四）- 练习：数据处理、轮播及交互

摘要：获取下一个元素节点，存在的话，取消现有选中状态，设置下一个元素节点为选择中，调用运动框架实现动画，添加定时器，调用该函数，实现自动播放。移出时，开启定时器，继续轮播。轮播间隔时间单位为毫秒，默认为，在内部，以下部分进行修改或添加。转载自我的个人博客欢迎大家批评指正包括5部分：小练习1-处理用户输入小练习2-日期对象的使用小练习3：轮播图小练习4：输入提示框小练习...

cnTomato 2019-08-22 10:59 评论0 收藏0
task0002（四）- 练习：数据处理、轮播及交互

摘要：获取下一个元素节点，存在的话，取消现有选中状态，设置下一个元素节点为选择中，调用运动框架实现动画，添加定时器，调用该函数，实现自动播放。移出时，开启定时器，继续轮播。轮播间隔时间单位为毫秒，默认为，在内部，以下部分进行修改或添加。转载自我的个人博客欢迎大家批评指正包括5部分：小练习1-处理用户输入小练习2-日期对象的使用小练习3：轮播图小练习4：输入提示框小练习...

赵春朋 2019-08-01 15:00 评论0 收藏0
html&&css

摘要：标准模式的排版和运作模式都是以该浏览器支持的最高标准运行。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。控制表单控件的禁用状态。首先，巧妙的使用这一标记，将游览器从所有情况中分离出来。 1.Doctype作用？标准模式与兼容模式各有什么区别声明位于位于HTML文档中的第一行，处于标签之前。告知浏览器的解析器,用什么文档标准解析这个文档。DOCTYPE不存在...

gggggggbong 2019-08-29 16:16 评论0 收藏0
html&&css

摘要：标准模式的排版和运作模式都是以该浏览器支持的最高标准运行。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。控制表单控件的禁用状态。首先，巧妙的使用这一标记，将游览器从所有情况中分离出来。 1.Doctype作用？标准模式与兼容模式各有什么区别声明位于位于HTML文档中的第一行，处于标签之前。告知浏览器的解析器,用什么文档标准解析这个文档。DOCTYPE不存在...

eccozhou 2019-08-02 11:08 评论0 收藏0
程序员！一款超实用的安卓实时同步投屏电脑的软件，谁用谁知道！

QtScrcpy超赞的安卓实时投屏软件 QtScrcpy介绍眼见为实的效果环境准备主要功能介绍手机打开USB调式模式运行精简模式非精简模式运行时注意这个图无线连接步骤（保证手机和电脑在同一个局域网）： QtScrcpy介绍 QtScrcpy可以通过USB(或通过TCP/IP)连接Android设备，并进行显示和控制。不需要root权限。单个应用程序最多支持16个安卓设备同时连接。同时支持G...

yy13818512006 2021-09-02 15:21 评论0 收藏0