HTML5 元素拖动

更新日期: 2022-04-27阅读: 944标签: 元素分享

复制链接

新浪微博

QQ 好友

扫一扫分享

很多前端恐怕都不了解html5的拖拽怎么实现吧，本文了解了下思路。进行整理备份，便于以后查阅。

1、拖动元素img的相关设置：

设置元素可以拖动属性

draggable="true"

设置元素被拖动时触发的事件

ondragstart="drag(event)"

图片元素可拖动的完整代码

HTML：

<img id="drag1" src="images/ycbt1.JPG" draggable="true" ondragstart="drag(event)" />

Javascript：

<script>
function drag(event){
    event.dataTransfer.setDate("Text",ev.target.id);
}
</script>

2、设置允许拖动对象放置的元素div：

允许拖动图片放置在div内，阻止对事件的默认处理方式，在div内添加属性

ondragover="allowDrop(event)"

放置时触发的事件

ondrop="drop(event)"

div元素可放置拖动img的完整代码

HTML：

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="width:600px; height:100px; border:1px solid black"></div>

Javascript:

<script>
function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

function allowDrop(ev)
{
    ev.preventDefault();
}

function drop(ev){
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>

3、把两张图片img拖动到一个div中，并排放置完整代码

HTML：

<body>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <img class="img" id="drag1" src="images/ycbt1.JPG" draggable="true" ondragstart="drag(event)"/>
    <img class="img" id="drag2" src="images/ycbt2.JPG" draggable="true" ondragstart="drag(event)"/>
</body>

css：

<style type="text/css">
#div1 {width:600px; height:100px; border:1px solid black; padding:10px}
.img {width:60px; height:90px; margin:10px; float:left}
</style>

Javascript:

<script type="text/javascript">
function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

function allowDrop(ev)
{
    ev.preventDefault();
}

function drop(ev){
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>

链接: https://fly63.com/article/detial/11398

HTML5 元素拖动

1、拖动元素img的相关设置：

2、设置允许拖动对象放置的元素div：

3、把两张图片img拖动到一个div中，并排放置完整代码

使用原生js来控制、修改CSS伪元素的方法总汇, 例如:before和:after

CSS隐藏元素的五种方法

CSS隐藏页面元素常用方法_不同场景下使用CSS隐藏元素

js动态生成html元素并为元素追加属性

原生js删除元素

原生JS如何获取当前元素属于父元素第几个子元素

在js中获取页面元素的属性值时,弱类型导致的诡异事件踩坑记录

JS 创建元素的三种方法

去除inline-block元素间的间距

什么是可替换元素？