How to drag content inside Modal on to the window

  css, drag-and-drop, html, javascript, modal-dialog

I have button on the screen which opens an Modal when it is clicked. Now when the modal opens, i want the content inside the modal draggable (with drag and drop API) to the normal window. Need Help.

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();
}

Is there anyway i can drag the content inside the modal on to the window(i.e. the normal windows other than modal)?

Source: Ask Javascript Questions

LEAVE A COMMENT