在javascript中拖放页面上的按钮_Javascript_Jquery_Html

在javascript中拖放页面上的按钮

javascript jquery html

在javascript中拖放页面上的按钮,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试创建可以在整个页面中移动的按钮，但我尝试的一切都不适合我。即使在以下情况下运行示例：不起作用到目前为止，我的javascript文件只能创建我需要的按钮： function add(text) { console.log("New button with text: "+ text); var word = document.createElement("button"); word.type = "button"; word.id = "magnet"; word.dragga

我正在尝试创建可以在整个页面中移动的按钮，但我尝试的一切都不适合我。即使在以下情况下运行示例：不起作用

到目前为止，我的javascript文件只能创建我需要的按钮：

function add(text) {
console.log("New button with text: "+ text);
var word = document.createElement("button");
word.type = "button";
word.id = "magnet";
word.draggable = true;
word.value = text;
word.onclick = "dragstart(event);";
var fridge = document.getElementById("poem");
//fridge.appendChild(word);
word.appendChild(document.createTextNode(text));
fridge.appendChild(word);

$("#addbutton").val(""); }

有人能解释一下如何使用clientX和clientY移动按钮吗

这是我的html文件

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="poetry.js" type="text/javascript"></script>
    <link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <input type="text" id="addbutton">
    <button type="button" onclick="add(addbutton.value);">Add Word</button>
    <div id="poem"></div>
</body>


加词

为什么不使用JQuery进行简单的拖放…@TGarrett我必须使用clientX和clientY进行分配。还有mouseup、mousedown和mousemove