【问题标题】：Creating Drag n drop in html using js使用js在html中创建拖放
【发布时间】：2020-06-05 03:28:06
【问题描述】：

我希望每个人在这艰难的时期都做得很好。
我正在为标签打印演示创建 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>

【问题讨论】：

可以使用第三方JS库吗？如果是的话，dragula 是一个非常好的选择。 bevacqua.github.io/dragula
@ArpitTyagi 谢谢这真的很棒，但是有没有使用少量 js 的简单方法。
这可能会有所帮助。 stackoverflow.com/questions/39133751/…

标签： javascript html css drag-and-drop draggable

【解决方案1】：

你需要看HTML drag and drop API

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

event.dataTransfer.setData 和 event.dataTransfer.getData

示例：

前段时间，我创建了一个使用拖放功能的小型 JS TaskManager 项目。你可以参考这个github link：

function drop() 对您特别有用。见here

【讨论】：