html拖拽显示获取坐标,html界面元素拖拽实现［超简单］

就是一个十分简单的小功能，将一个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方法附图

界面效果

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

html拖拽显示获取坐标,html界面元素拖拽实现［超简单］相关推荐

js控制文件拖拽，获取拖拽内容。
在用户拖拽文件到浏览器的某个元素上时,js可以监听到与拖拽相关的事件,并对拖拽结果进行处理,本文讨论下和拖拽文件相关的一些问题,不过没有处理太多关于兼容性的问题. 拖拽事件 js能够监听到拖拽的事件有 ...
百度地图，开启marker点拖拽，并监听拖拽后的坐标位置
有的网站可能让用户自己移动marker点选择位置这个时候需要就来了开启marker点的拖拽还是很简单的哈其实开启拖拽的也是 BMapGL 版本的地图这点要记住哈 var mar ...
js控制文件拖拽，获取拖拽内容
在用户拖拽文件到浏览器的某个元素上时,js可以监听到与拖拽相关的事件,并对拖拽结果进行处理,本文讨论下和拖拽文件相关的一些问题,不过没有处理太多关于兼容性的问题. 拖拽事件 js能够监听到拖拽的事件有 ...
快速获取安卓手机界面元素的坐标
之前一直用UIautomatorviewer工具来获取安卓手机界面元素的ID和坐标,这个工具针对安卓8及以下版本都可以成功获取界面,但对于安卓9的手机界面经常出现获取不稳定的情况,且使用此工具获取的元 ...
vuedraggable嵌套块拖拽_Vue 基于 vuedraggable 实现选中、拖拽、排序效果
今天有个朋友说要做个效果:Vue实现拖拽排序,要有 checked,输出结果是排序后的,要全选,未选中的不能拖动. 其实我之前基于 Sortable 做过一个类似的效果.也给他看过了,没看太明白,他就 ...
draggable禁止拖动_通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽...
前言关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...
安卓开发仿微信图片拖拽_Android 仿微信朋友圈图片拖拽返回
目前的app的动画效果是越来越炫了,很多主流app的图片预览返回都有类似功能,比较常见的是ios自带相册,微信朋友圈等等.自己项目中也有类似功能,最近整理了一下这个功能的代码,做个笔记记录,有兴趣的朋 ...
android allapp图标拖动,RecyclerView 拖拽移动，长按小图标拖拽，侧滑删除
RecyclerView拖拽移动,长按小图标拖拽,侧滑删除长按小图标拖拽.gif 侧滑删除.gif Android RecyclerView出来也很多年了,是非常成熟的控件,Github上工具一堆, ...
overflow鼠标拖拽显示_[翻译] 从零开始的 .Net Shell 扩展教程 (四) - Shell 拖拽处理程序
Vukr:[翻译] 从零开始的 .Net Shell 扩展教程 (三) - Shell 提示处理程序zhuanlan.zhihu.com 使用 .Net 快速创建 Shell 拖拽处理程序介绍 S ...

html拖拽显示获取坐标,html界面元素拖拽实现［超简单］

html拖拽显示获取坐标,html界面元素拖拽实现［超简单］相关推荐

最新文章

热门文章