eqiz eqiz - 11 months ago 76
jQuery Question

Create Draggable div based off jQuery Semi Transparent Drag and Drop visual

I have a simple DIV

<div class="draggable">some text</div>

I'm dragging around that I'm using the "Ghost" or "Semi Transparent Clone" visual affect using the jQuery UI as listed at: https://jqueryui.com/draggable/#visual-feedback

What I am trying to do is create a new draggable DIV at the location of the "Ghost" div after its been dropped.

The code I attempted (which shows the "Ghost/Semi-Transparent") is..

$( ".draggable" ).draggable({
opacity: 0.7, helper: "clone",
stop: function() {

current code demo: https://jsfiddle.net/y49bg4pf/

I tried setting up an Alert just to test the offset of the ghost object, but of course its only showing me the offset of the original and not the ghost. I'm assuming once I can figure this part out, then I should be able to just create a new DIV and assign it the class "draggable" to do this all over again with the newly created DIV.

Answer Source

I've organized your code properly (separated the CSS from the markup) and I've added a wrapper div called container. You can access the offset values you're after through the ui.offset but you need to send it as param on your stop function.

Let me know if this is the desired behaviour. Dragging from the original will create a new element which is draggable, but does not continue creating new elements on drag.

$(function() {
    opacity: 0.7,
    helper: "clone",
    stop: function(e, ui) {
      var newEl = $(this).clone();
      newEl.css("top", ui.offset.top);
      newEl.css("left", ui.offset.left);
  position: relative;
  height: 40px;
  width: 80px;
  background-color: maroon;
  color: yellow;
  position: absolute;
  border: 1px solid black;
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<div id="container">
<div class="draggable">some text</div>