How to make a draggable item from a draggable item?

Question

I have a window that is draggable and I want to make the document that this window has to be independent and it can be dragged and when dropped the element is copied to where it was dragged and for it to also stay in the window. Basically when what is supposed to do is you drag the document out of the window into anywhere in your screen and when you stop dragging, the document is copied and you have a document on the window and one on your screen. The one on the screen can't be copied but can be dragged. How do I do it?

 dragElement(document.getElementById("documento")); dragElement(document.getElementById("docwindow")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id + "header")) { // if present, the header is where you move the DIV from: document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown; } else { // otherwise, move the DIV from anywhere inside the DIV: elmnt.onmousedown = dragMouseDown; } function dragMouseDown(e) { e = e || window.event; e.preventDefault(); // get the mouse cursor position at startup: pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; // call a function whenever the cursor moves: document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault(); // calculate the new cursor position: pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; // set the element's new position: elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } function closeDragElement() { // stop moving when mouse button is released: document.onmouseup = null; document.onmousemove = null; } } 

 #janela, #docwindow, #BlueWindow { position: absolute; width: 40%; height: 38%; left: 100px; } #docwindowheader, #BlueWindowheader { height: 7%; background: rgb(30, 87, 153); /* Old browsers */ background: -moz-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0); /* IE6-9 */ } #closeDocs, #closeBlue { width: 15px; height: 15px; position: absolute; border-radius: 100%; top: 4.2%; right: 1%; z-index: 2; } #docsHeadTexto, #JoanaPTexto { color: black; text-align: center; text-shadow: 3px 2px grey; font-size: 95%; top: 25%; } #DocImg { width: 20%; height: 20%; background-color: none; padding: 5px; } img#DocImg {} #bottomWindowDocs { background-color:pink; height: 80%; border-bottom-left-radius: 5%; border-bottom-right-radius: 5%; } #DocEx { position: absolute; top: 33%; left: 4%; font-size: 10px; } #DocEx { z-index: 6; } 

 <div class="janelas" id="docwindow"> <div id="docwindowheader"> <header class="windowTop"> <h1 id="docsHeadTexto">Documents</h1> <img id="closeDocs" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="closeMain()"> </header> </div> <div id="bottomWindowDocs"> <div class="documents"> <div id="documento"> <img id="DocImg" src="https://img.icons8.com/pastel-glyph/2x/file.png" alt="doc"> <h1 id="DocEx">Doc-example</h1> </div> </div> <!----<div id="DocExemplo" S> <header class="windowhead"> Documento exemplo <img class="X" src="https://banner2.kisspng.com/20180402/dwe/kisspng-computer-icons-social-media-email-webmail-cancel-button-5ac240963875f3.0504665115226799582313.jpg" alt="X" onclick="closeMain()"> <button id="share">share</button> <button id="back">back</button> </header> <div id="corpo"> <h4>Este é um exemplo de Documento</h4> </div> </div>--> </div> </div> 

Answer 1

Just to illustrate the basic functionality using jQuery's draggable() , check this demo on jsFiddle .

Here's the JS you would need to allow dragging one element with children that may be dragged and dropped separately:

$('#doc-container').droppable({
  activeClass: "ui-state-default",
  hoverClass: "ui-state-hover",
  cursor: 'move',
  greedy: true,
  drop: function(event, ui) {
    console.log(ui);
    $(ui.draggable).removeClass("out-of-box").addClass("in-box");
    ui.draggable.detach().appendTo($(this));
  }
});

$('#larger-drop-target').droppable({
  activeClass: "ui-state-default",
  hoverClass: "ui-state-hover",
  cursor: 'move',
  drop: function(event, ui) {
    $(ui.draggable).removeClass("in-box").addClass("out-of-box");
    ui.draggable.detach().appendTo($(this));
  }
});

$("#doc-container, .draggable").draggable({});

My sample uses the following HTML layout:

<div id="larger-drop-target">
  <div id="doc-container" class="ui-widget-header droppable">
    <header class="windowTop">
      <h1 id="docsHeadTexto">Documents</h1>
    </header>

    <div id="draggable" style="left:0;" class="draggable ui-widget-content">
      Doc Example
    </div>
  </div>
</div>

and CSS Code:

#larger-drop-target {
  width: 100%;
  height: 100%;
}

.draggable {
  width: 80px;
  height: 80px;
  padding: 5px;
  position: absolute;
}

#doc-container {
  height: 200px;
}

.in-box {
  background: #FEE;
}

.out-of-box {
  background: #EFE;
}

Some explanatory words:

• droppable() defines those elements that may accept elements to be dragged onto. In the sample I could not use the HTML "body" element as this wouldn't work in a fiddle so I decided to wrap the #doc-container in the larger container #larger-drop-target . The .detach() and .attachTo() makes sure the element's parent is removed and assigned to the current drop target, otherwise child elements would still move with their parent even if they have been dropped outside of it.
• draggable() defines those elements that may be dragged around.
• the classes applied to the dropped elements are just for demonstration purpose; elements that have been dropped on the #doc-container appear red, those dropped outside of it are green.
• the position: absolute for dragged elements was necessary as otherwise elements would constantly move around whenever one element was moved. If you need several "documents" in your container, give each a fitting left: X00px; style

Update 1:

You may clone each element as soon as it leaves the parent container and when dragged back remove it using class checks and .clone() / .remove() :

$('#doc-container').droppable({
  activeClass: "ui-state-default",
  hoverClass: "ui-state-hover",
  cursor: 'move',
  greedy: true,
  drop: function(event, ui) {
    if (ui.draggable.hasClass('out-of-box')) {
      ui.draggable.remove();
    } else {
      $(ui.draggable).removeClass("out-of-box").addClass("in-box");
      ui.draggable.detach().appendTo($(this));
    }

  }
});

$('#larger-drop-target').droppable({
  activeClass: "ui-state-default",
  hoverClass: "ui-state-hover",
  cursor: 'move',
  drop: function(event, ui) {
    if (ui.draggable.hasClass("in-box")) {
      var clone = ui.draggable.clone();
      clone.removeClass("in-box").addClass("out-of-box");
      clone.detach().appendTo($(this)).draggable({});
      ui.draggable.draggable({
        revert: true
      });
    }
  }
});

Here is a Fiddle showing the changed version.