Javascript 如何将模式内的内容拖到窗口上_Javascript_Html_Css_Drag And Drop_Modal Dialog

Javascript 如何将模式内的内容拖到窗口上

javascript html css

Javascript 如何将模式内的内容拖到窗口上,javascript,html,css,drag-and-drop,modal-dialog,Javascript,Html,Css,Drag And Drop,Modal Dialog,我在屏幕上有一个按钮，当它被点击时会打开一个模式。现在，当模态打开时，我希望模态中的内容可以拖动（使用拖放API）到普通窗口。我需要帮助 index.html <html> <head> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="main">

我在屏幕上有一个按钮，当它被点击时会打开一个模式。现在，当模态打开时，我希望模态中的内容可以拖动（使用拖放API）到普通窗口。我需要帮助

index.html
<html>

<head>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="main">
        <button id="show-modal">Show Modal</button>
        <div id="my-modal" class="modal">
            <div class="modal-content">
                <span id="close-btn">&times;</span>
                <p class="sample-text" id="draggable-1" draggable="true" ondragstart="onDragStart(event);">Some text here</p>
            </div>
            <div class="dragged-area" ondragover="onDragOver(event);" ondrop="onDrop(event);">

            </div>
        </div>
    </div>
    <script src="./script.js"></script>
</body>

</html>

我是否可以将模式中的内容拖动到窗口（即模式以外的正常窗口）？

style.css

/* Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

/* Modal content */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; 
  padding: 20px;
  border: 1px solid #888;
  width: 80%; 
}

/* The Close Button */
#close-btn {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

#close-btn:hover,
#close-btn:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.sample-text{
    border: 2px solid red;
}

script.js
var modal = document.getElementById("my-modal");
var btn = document.getElementById("show-modal");
var span = document.getElementById("close-btn");

btn.onclick = function () {
    modal.style.display = "block";
}

span.onclick = function () {
    modal.style.display = "none";
}

window.onclick = function (event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

function onDragStart(event){
    event.dataTransfer.setData("text.html", event.target.id);
    event.currentTarget.style.border = "2px solid yellow";
    
}

function onDragOver(event){
    event.preventDefault();
}

function onDrop(event){
    const id = event.dataTransfer.getData("text");
    const draggableElement = document.getElementById(id);
    const dropzone = event.target;
    dropzone.appenchild(draggableElement);
    event.dataTransfer.clearData();
}