原生JS实现拖拽位置预览
更新时间：2021年10月19日 08:59:53 作者：aiguangyuan
这篇文章主要为大家详细介绍了原生JS实现拖拽位置预览，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文给大家分享一个拖拽元素时添加预览的小Demo，效果如下：
以下是代码实现，欢迎大家复制粘贴及吐槽。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现拖拽位置预览</title>
<style>
.box {
position: absolute;
border: 1px dashed black;
}
#div1 {
width: 100px;
height: 100px;
background: yellow;
position: absolute;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
oDiv.onmousedown = function (ev) {
var oEvent = ev || event;
var disX = oEvent.clientX - oDiv.offsetLeft;
var disY = oEvent.clientY - oDiv.offsetTop;
//创建一个虚线框的div
var oNewDiv = document.createElement('div');
oNewDiv.className = 'box';
//减去边框的大小与原div大小重合
oNewDiv.style.width = oDiv.offsetWidth - 2 + 'px';
oNewDiv.style.height = oDiv.offsetHeight - 2 + 'px';
oNewDiv.style.left = oDiv.offsetLeft + 'px';
oNewDiv.style.top = oDiv.offsetTop + 'px';
document.body.appendChild(oNewDiv);
document.onmousemove = function (ev) {
var oEvent = ev || event;
oNewDiv.style.left = oEvent.clientX - disX + 'px';
oNewDiv.style.top = oEvent.clientY - disY + 'px';
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
oDiv.style.left = oNewDiv.style.left;
oDiv.style.top = oNewDiv.style.top;
//移除虚线框
document.body.removeChild(oNewDiv);
};
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在电脑上找到多年前的javascript的一些小笔记，因为要将笔记本上面的文件整理一下， 不用的删除掉， 所以将此篇笔记再发布一下，存档到自己的博客吧， 电脑上的文件就删除了2011-06-06
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring），下文中给大家提供了嵌套数组的解构例子，大家一起看看吧2017-09-09
鼠标事件的移动及移出效果都可以使用js来自定义，下面有个示例，实，效果为当事件发生改变时背景颜色也随着改变2014-10-10
这篇文章主要介绍了浅谈js数组splice删除某个元素爬坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）
这篇文章主要介绍了Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
网站首页图片滚动显示对于很多朋友都有很大的吸引,因为它可以带来意想不到视觉冲击效果，接下来本文也实现一下，感兴趣的朋友可以参考下，或许对你学习js知识有所帮助2013-02-02
JavaScript中object和Object的区别(详解)
下面小编就为大家带来一篇JavaScript中object和Object的区别(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要为大家详细介绍了微信小程序多项选择器checkbox，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了将php数组或者对象传递给javascript的方法,需要的朋友可以参考下2014-03-03
这篇文章主要为大家详细介绍了使用javaScript实现鼠标拖拽事件的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
最新评论