使用js在html中创建拖放HTML API。

问题描述 投票：0回答：1

希望大家在这段严酷的日子里过得好。 我正在为标签打印演示创建一个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>
javascript html css drag-and-drop draggable
1个回答
1
投票

你需要看看 HTML拖放API

最重要的东西是使用.dataTransfer.setData来设置和访问数据。

event.dataTransfer.setData和事件.dataTransfer.getData

例子：我前段时间创建了一个使用拖放功能的JS任务管理器小项目。

我曾经创建过一个小型的vanilla JS TaskManager项目，使用拖放功能。你可以参考这个 github链接:

负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： function drop() 会对你特别有用。看吧 此处

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.