jQuery 2D drag and drop element (Not absolute position)

Question

I am going put external element into inner html using drag & drop. So I assume like this. This is inner html.

<div class="inner_html">
   <div class="title">
     <h1>This is title</h1>
   </div>
   <div class="body">
     <li>this is element</li>
     <a>element</a>
   </div>
</div>

Here is external html. <div>This is external element</div>

I am going to drag external element and drop into inner html. So final element can get a lot of results. I think if position were absolute, then it can be done easily using jquery draggable plugin. But I don't want absolute position. just want to put into inner html.

Can anyone help me?

If i understood correctly, you'd first need code to detect the initial mouse click and the objeck clicked. Then, detect the release point and the object over which the release happened. Finally, clone the first element into the last one and remove the leftover. Also check this: https://stackoverflow.com/questions/22799779/drag-element-from-inside-one-div-into-another — user2464424, Apr 06 '20 at 15:31
Please review: https://jqueryui.com/droppable/ this is a basic Drag and Drop example with jQuery UI library. — Twisty, Apr 06 '20 at 19:51
https://snipboard.io/Bx0W7A.jpg well I was going to drop this image but it didn't work. just working as draggable, as position relative. — LoveCoding, Apr 06 '20 at 20:08

score 1 · Accepted Answer · edited Jun 01 '22 at 05:47

Consider the following code.

$(function() {
  $(".drag > div").draggable();
  $(".inner_html").droppable({
    drop: function(e, ui) {
      ui.draggable.css({
        top: "",
        left: "",
        position: "inherit"
      }).appendTo($(".inner_html"));
    }
  });
});

.inner_html {
  width: 340px;
  background: #ccc;
  padding: 1em;
  margin-bottom: 20px;
}

.inner_html>div {
  background: white;
  border: 1px solid #222;
  border-radius: 3px;
}

.drag {
  border: 1px solid #ccc;
  width: 340px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="inner_html">
  <div class="title">
    <h1>This is title</h1>
  </div>
  <div class="body">
    <a>Link</a>
  </div>
</div>
<div class="drag items">
  <h3>Items</h3>
  <div>This is external element</div>
</div>

jQuery 2D drag and drop element (Not absolute position)

1 Answers1