时间戳

首页 > 解决方案 > 使用js在html中创建拖放

javascript - 使用js在html中创建拖放

问题描述


我希望每个人都在这个艰难的时期做得很好。
我正在为标签打印演示创建一个 HTML 模板。
我想在此页面中创建只能通过 JavaScript 获得的拖放功能，而且我什至对 HTML 也是新手。
我知道这是一个愚蠢的问题，但我真的需要这个功能，因为它已经花了我很多时间而没有结果。如果您能告诉我或指导我如何实现这一目标，那将是非常有帮助的。

!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Label Printer</title>
<style>
    body {
        display: block;
        max-width: 29.7cm;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
    }
    div{
        width: 49.2%;
        height: 3.7125cm;
        float: left;
    }
</style>
</head>
<body>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div><p>michael richardson<br>1 arbitrary road<br>coningsby ,&nbsp; Lincolnshire&nbsp;<br>IX14YY&nbsp;<br>United Kingdom<br></p></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <style media="print">@page {margin-top: 0;margin-left: 3cm;margin-right: 0;margin-bottom: 0;}</style>
</body>
</html>

标签： javascripthtmlcssdrag-and-dropdraggable

解决方案

您需要查看HTML 拖放 API

最重要的是使用以下方法设置和访问数据：

event.dataTransfer.setData 和 event.dataTransfer.getData

例子：

前段时间，我创建了一个使用拖放功能的小型 JS TaskManager 项目。您可以在此github 链接上参考相同的内容：

这function drop()将对您特别有用。看这里

推荐阅读